Edycja w grupie elementów w JavaScript

Załóżmy teraz, że mamy nie jeden akapit, a wiele:

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

Zróbmy tak, aby po kliknięciu na dowolny akapit pojawił się w nim input do edycji.

W rzeczywistości takie zadanie nie przedstawia dla nas trudności, ponieważ prawie cały kod został uzyskany przez nas w poprzedniej lekcji.

Aby rozwiązać nasze zadanie, po prostu uruchommy pętlę po akapitach i w pętli użyjmy kodu z poprzedniej lekcji (ten kod nawet nie będzie trzeba zmieniać):

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

Dany jest znacznik ul. Zrób tak, aby po kliknięciu na dowolny li pojawił się w nim input, za pomocą którego będzie można edytować tekst tego li.

Podana jest tabela HTML. Zrób tak, aby po kliknięciu na dowolną komórkę pojawił się w niej input do edycji tekstu tej komórki.