Как поменять объект в HTML при помощи JS DOM?

Question

[Вусал Касумов]

В режиме редактирования у нас есть textarea где мы вводим текст, который, при нажатии на “Сохранить” превращается в P и появляется кнопка “Редактировать”, которая, напротив, превращает P в textarea (не забывая при этом содержимого). Смог выполнить первую часть задание, смог textarea превратить в P, а кнопку сохранить в редактировать. Но не получается все вернуть обратно.

<div id="name">
   <textarea id="text" placeholder="напишите свой текст"></textarea>
   <br>
   <button id="save"  >сохранить</button>
   </div>

document.querySelector("#save").addEventListener(
    "click",
    event => {
       text = document.querySelector("textarea");  
       text.parentNode.removeChild(text);
       
       let name = document.querySelector("#name");
       let p = document.createElement("p");
       name.appendChild(p);
       p.append(text.value);

       but1 = document.querySelector("#save");
       but1.parentNode.removeChild(but1);

       butn = document.createElement("button")
       butn.appendChild(document.createTextNode("редактировать"));
       name.appendChild(butn);

       butn.addEventListener("click",  turnItBack() );
    }
)

Answer 1

[rPman]

Тебе нужно именно подменить или достаточно чтобы их видно было попеременно?

На странице нужно создать два эелемента и P и TEXTAREA и по нажатию кнопок заполнять их содержимым и попеременно менять им стиль display на none и inline (или block в общем смотри по своим требованиям к отображению), скрывая и показывая только нужный элемент

Comments

[Вусал Касумов]

Я нажимаю на кнопку "сохранить" и TEXAREA превращается в P, а сама кнопка "сохранить" превращается в "редактировать". Это сделать я смог. Теперь то мне надо чтобы при нажатии на кнопку "редактировать" все возвращалось обратно. Вот именно это у меня не получается.

[rPman]

у тебя после первого действия создается новая кнопка с событием turnItBack() что там?

[Вусал Касумов]

rPman, Я не смог прописать это событие

[rPman]

turnItBack это твоя функция которая должна делать то же что и указанная тут но наоборот удалять P и добавлять textarea и кнопку

выбранный способ максимально дибильный, лучше делай как я написал в ответе