Edição de um elemento individual em JavaScript

Agora vamos aprender a editar textos de elementos usando campos de entrada. Vamos começar com coisas simples e gradualmente aumentar a complexidade.

Então, suponha que temos um parágrafo e um input, dispostos no mesmo elemento pai:

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

Vamos fazer com que, ao perder o foco, o texto do input apareça no parágrafo:

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

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

Agora vamos fazer com que, ao carregar a página, o texto do parágrafo já esteja no input. Dessa forma, poderemos usar o input para editar o texto localizado no parágrafo.

Vamos implementar:

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

input.value = elem.textContent; // escrevemos no input o texto do parágrafo

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

Aparição do input

Agora vamos fazer com que o input inicialmente não esteja na página, mas apareça ao clicar no parágrafo. Ou seja, nosso HTML inicial ficará assim:

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

Para começar, vamos simplesmente implementar o aparecimento do input, sem a funcionalidade de edição:

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

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

E agora vamos fazer com que, ao perder o foco no input, o texto do parágrafo mude:

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);
});

No entanto, nosso código é imperfeito, pois cada clique no parágrafo resultará no aparecimento de um novo input.

Para resolver o problema, simplesmente removeremos o input atual quando ele perder o foco:

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(); // removemos o input
  });
  
  elem.parentElement.appendChild(input);
});