Edición en un grupo de elementos en JavaScript

Supongamos que ahora no tenemos un párrafo, sino muchos:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Hagamos que al hacer clic en cualquier párrafo aparezca un input para edición.

En realidad, esta tarea no representa dificultad para nosotros, ya que casi todo el código fue obtenido por nosotros en la lección anterior.

Para resolver nuestra tarea, simplemente ejecutemos un ciclo a través de los párrafos y en el ciclo usemos el código de la lección anterior (este código ni siquiera necesitará ser modificado):

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function func() {
		let input = document.createElement('input');
		input.value = elem.textContent;
		
		elem.textContent = '';
		elem.appendChild(input);
		
		input.addEventListener('blur', function() {
			elem.textContent = this.value;
			elem.addEventListener('click', func);
		});
		
		elem.removeEventListener('click', func);
	});
}

Dada la etiqueta ul. Haz que al hacer clic en cualquier li aparezca un input, con el cual se pueda editar el texto de esta li.

Dada una tabla HTML. Haz que al hacer clic en cualquier celda aparezca un input para editar el texto de esa celda.