Kloniranje elementov v JavaScriptu

V tej lekciji se bomo naučili pridobivati kopije elementov. S temi kopijami lahko delujemo kot z običajnimi elementi - jih spreminjamo in vstavljamo na želeno mesto na strani. Proces pridobivanja kopij elementov imenujemo kloniranje.

Element lahko kloniramo z metodo cloneNode. V to metodo je treba posredovati parameter true ali false. Če je posredovano true, se element klonira v celoti, skupaj z vsemi atributi in podrejenimi elementi, če pa false - samo sam element.

Poglejmo si na primeru. Naj imamo takšno kodo:

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

Naredimo kopijo bloka z razredom elem in ga vstavimo na konec bloka #parent:

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

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

Rezultat bo naslednji:

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

Podan je vnosni element (input). Podan je gumb. Ob kliku na gumb klonirajte ta vnosni element.