Редактирование отдельного элемента на JavaScript

Сейчас мы научимся редактировать тексты элементов с помощью полей ввода. Начнем с простых вещей и будем постепенно усложнять.

Итак, пусть у нас даны абзац и инпут, расположенные в одном родителе:

html<div id="parent">
  <p id="elem">text</p>
  <input id="input">
</div>

Давайте сделаем так, чтобы по потери фокуса в инпуте его текст появлялся в абзаце:

javascriptlet elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.addEventListener('blur', function() {
  elem.textContent = this.value;
});

Давайте теперь сделаем так, чтобы по заходу на страницу в инпуте уже стоял текст абзаца. Таким образом мы с помощью инпута сможем редактировать текст, расположенный в абзаце.

Реализуем:

javascriptlet elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.value = elem.textContent; // записываем в инпут текст абзаца

input.addEventListener('blur', function() {
  elem.textContent = this.value;
});

Появление инпута

Давайте теперь сделаем так, чтобы инпута изначально не было на странице, а он появлялся по клику на абзац. To есть наш начальный HTML будет выглядеть так:

html<div id="parent">
  <p id="elem">text</p>
</div>

Для начала просто реализуем появление инпута, без редактирования:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
  let input = document.createElement('input');
  input.value = elem.textContent;
  
  elem.parentElement.appendChild(input);
});

А теперь давайте сделаем так, чтобы по потери фокуса в инпуте менялся текст абзаца:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
  let input = document.createElement('input');
  input.value = elem.textContent;
  
  input.addEventListener('blur', function() {
    elem.textContent = this.value;
  });
  
  elem.parentElement.appendChild(input);
});

Наш код, однако, несовершенен, так как каждое нажатие на абзац будет приводить к появлению нового инпута.

Для решения проблемы просто будем по потери фокуса удалять текущий инпут:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
  let input = document.createElement('input');
  input.value = elem.textContent;
  
  input.addEventListener('blur', function() {
    elem.textContent = this.value;
    this.remove(); // удалим инпут
  });
  
  elem.parentElement.appendChild(input);
});