Kloniranje elemenata u JavaScript-u

U ovoj lekciji naučićemo kako da dobijemo kopije elemenata. Sa ovim kopijama možemo raditi kao sa običnim elementima - menjati ih i ubacivati na željeno mesto stranice. Proces dobijanja kopija elemenata naziva se kloniranje.

Element se može klonirati pomoću metode cloneNode. U ovu metodu treba proslediti parametrom true ili false. Ako je prosleđeno true, element će biti kloniran u potpunosti, zajedno sa svim atributima i podređenim elementima, a ako je false - samo sam element.

Pogledajmo na primeru. Neka imamo ovakav kod:

<div id="parent">
	<div class="elem">
		<p>prvi pasus</p>
		<p>drugi pasus</p>
	</div>
</div>

Hajde da napravimo kopiju bloka sa klasom elem i da ga ubacimo na kraj bloka #parent:

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

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

Kao rezultat ćemo dobiti sledeće:

<div id="parent">
	<div class="elem">
		<p>prvi pasus</p>
		<p>drugi pasus</p>
	</div>
	<div class="elem">
		<p>prvi pasus</p>
		<p>drugi pasus</p>
	</div>
</div>

Dat je input. Data je dugme. Klikom na dugme klonirajte ovaj input.