Clonarea elementelor în JavaScript

În această lecție vom învăța să obținem copii ale elementelor. Cu aceste copii se va putea lucra, ca și cu elementele obișnuite - le puteți modifica și le puteți insera în locul potrivit al paginii. Procesul de obținere a copiilor elementelor se numește clonare.

Puteți clona un element folosind metoda cloneNode. În această metodă trebuie să transmiteți ca parametru true sau false. Dacă este transmis true, atunci elementul este clonat complet, împreună cu toți atribuții și elementele copil, iar dacă false - doar elementul în sine.

Să ne uităm la un exemplu. Să presupunem că avem un cod ca acesta:

<div id="parent">
	<div class="elem">
		<p>primul paragraf</p>
		<p>al doilea paragraf</p>
	</div>
</div>

Să facem o copie a blocului cu clasa elem și să o inserăm la sfârșitul blocului #parent:

let parent = document.querySelector('#parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
parent.appendChild(clone);

Rezultatul va fi următorul:

<div id="parent">
	<div class="elem">
		<p>primul paragraf</p>
		<p>al doilea paragraf</p>
	</div>
	<div class="elem">
		<p>primul paragraf</p>
		<p>al doilea paragraf</p>
	</div>
</div>

Este dat un input. Este dat un buton. La click pe buton clonați acest input.