How to change a div to textarea and vice versa with only vanilla javascript without using jquery?-CodePudding

how to change a div to a textarea to edit the text in the div when a button is clicked and the same button is clicked again then that textarea change to a div.

HTML

<button >click me</button>
<div >this is div or textarea</div>

const button = document.querySelector('button');
const div = document.querySelector('div');


let isTextarea = false

button.addEventListener('click', () => { 
  if(isTextarea) {
    const div = document.createElement('div')
    const textarea = document.createElement('textarea')
    div.innerHTML = textarea.value
    textarea.parentNode.replaceChild(div, textarea)
    isTextarea = false
  }else {
    const textarea =document.createElement('textarea')
    textarea.innerHTML = div.innerHTML
    div.parentNode.replaceChild(textarea, div)
    isTextarea = true
  }
} )

CodePudding user response：

You do not need to create both a <div> and a <textarea> in both branches. If you have a textarea, all you need to create is a div, and if you have a div, all you need to create is a textarea. (Referencing the textarea.parentNode of an element you just created and haven't appended anywhere throws an error, as expected - that doesn't make sense.)

You'll need to either select the existing <div> or <textarea> in the document

const button = document.querySelector('button');
let isTextarea = false
button.addEventListener('click', () => {
  if (isTextarea) {
    const div = document.createElement('div');
    const textarea = document.querySelector('textarea');
    div.innerHTML = textarea.value;
    textarea.parentNode.replaceChild(div, textarea);
    isTextarea = false;
  } else {
    const textarea = document.createElement('textarea');
    const div = document.querySelector('div');
    textarea.innerHTML = div.innerHTML;
    div.parentNode.replaceChild(textarea, div)
    isTextarea = true
  }
})

<button >click me</button>
<div >this is div or textarea</div>

Or create both elements on pageload, but only append one initially.

const button = document.querySelector('button');
const div = document.body.appendChild(document.createElement('div'));
div.textContent = 'this is div or textarea';
const textarea = document.createElement('textarea');

let isTextarea = false
button.addEventListener('click', () => {
  if (isTextarea) {
    div.innerHTML = textarea.value;
    textarea.parentNode.replaceChild(div, textarea);
    isTextarea = false;
  } else {
    textarea.innerHTML = div.innerHTML;
    div.parentNode.replaceChild(textarea, div)
    isTextarea = true
  }
})

<button >click me</button>

You could also ditch the isTextarea flag if you wanted by checking which element .isConnected.

const button = document.querySelector('button');
const div = document.body.appendChild(document.createElement('div'));
div.textContent = 'this is div or textarea';
const textarea = document.createElement('textarea');

button.addEventListener('click', () => {
  if (textarea.isConnected) {
    div.innerHTML = textarea.value;
    textarea.parentNode.replaceChild(div, textarea);
  } else {
    textarea.innerHTML = div.innerHTML;
    div.parentNode.replaceChild(textarea, div)
  }
})

<button >click me</button>

CodePudding user response：

You don't really need to replace the child unless there's some reason that the first child of the .div div must contain a particular thing. Just hide whichever one you don't need.

let div;
let textarea;

document.addEventListener('DOMContentLoaded', function() {
  div = document.querySelector('.div > div');
  textarea = document.querySelector('.div > textarea');

  document.querySelector('button').addEventListener('click', () => { 
    div.classList.toggle('hidden')
    textarea.classList.toggle('hidden')
  } )

  textarea.addEventListener('input', () => { 
    div.innerHTML = textarea.value
  } )
})

.hidden {
  display: none
}

<button >click me</button>
<div ><div ></div><textarea></textarea></div>