Metóda cloneNode

Metóda cloneNode umožňuje klonovať prvok a získať jeho presnú kópiu. Túto kópiu potom možno vložiť na stránku pomocou metód prepend, append, appendChild, insertBefore alebo insertAdjacentElement.

V parametri metóda dostane true alebo false. Ak je zadané true, prvok sa naklonuje úplne, so všetkými atribútmi a podriadenými prvkami, a ak false - iba samotný prvok (bez podriadených prvkov).

Syntax

prvok.cloneNode(true alebo false);

Príklad

Vytvoríme kópiu bloku s triedou elem a vložíme ho na koniec bloku #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);

Výsledok vykonania kódu:

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

Príklad

S získaným klónom možno pracovať ako s obyčajným prvkom:

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

Výsledok vykonania kódu:

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

Pozri tiež

metóda createElement,
ktorá umožňuje vytvoriť nový prvok