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:

<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:

let 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:

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

Modifique o código acima para que o texto do parágrafo mude não na perda de foco, mas à medida que o texto é digitado no input.

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:

<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:

let 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:

let 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:

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

Resolva independentemente a tarefa descrita, sem consultar o meu código.