Metoda cloneNode

Metoda cloneNode omogoča kloniranje elementa in pridobivanje njegove natančne kopije. To kopijo lahko nato vstavite na stran z uporabo metod prepend, append, appendChild, insertBefore ali insertAdjacentElement.

Kot parameter metoda prejme true ali false. Če je podan true, se element klonira v celoti, z vsemi atributi in podrejenimi elementi, če pa je false - samo sam element (brez podrejenih elementov).

Sintaksa

element.cloneNode(true ali false);

Primer

Naredimo kopijo bloka z razredom elem in ga vstavimo na konec 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 izvajanja kode:

<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

Z dobljenim klonom lahko delujete kot z navadnim 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 izvajanja kode:

<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>

Glejte tudi

metoda createElement,
ki se uporablja za ustvarjanje novega elementa