Metod cloneNode

Metod cloneNode omogućava kloniranje elementa i dobijanje njegove tačne kopije. Ovu kopiju zatim možete da umetnete na stranicu uz pomoć metoda prepend, append, appendChild, insertBefore ili insertAdjacentElement.

U parametru metod prima true ili false. Ako je prosleđeno true, element se klonira potpuno, zajedno sa svim atributima i podređenim elementima, a ako je false - samo sam element (bez podređenih elemenata).

Sintaksa

element.cloneNode(true ili false);

Primer

Napravićemo kopiju bloka sa klasom elem i umetnuti ga na kraj bloka #parent:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

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

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

Rezultat izvršavanja koda:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

Primer

Sa dobijenim klonom možete raditi kao sa običnim elementom:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

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

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'new text1';
clone.children[1].textContent = 'new text2';

parent.appendChild(clone);

Rezultat izvršavanja koda:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>new text1</p>
		<p>new text2</p>
	</div>
</div>

Pogledajte takođe

metod createElement,
pomoću kojeg možete kreirati novi element