Metoda cloneNode

Metoda cloneNode umožňuje klonovat element a získat jeho přesnou kopii. Tuto kopii pak lze vložit na stránku pomocí metod prepend, append, appendChild, insertBefore nebo insertAdjacentElement.

Jako parametr metoda přijímá true nebo false. Pokud je předáno true, element je naklonován kompletně, se všemi atributy a podřízenými elementy, a pokud false - pouze samotný element (bez podřízených elementů).

Syntaxe

prvek.cloneNode(true nebo false);

Příklad

Vytvoříme kopii bloku s třídou elem a vložíme ji na konec 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ýsledek provedení 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>

Příklad

S výsledným klonem lze pracovat jako s obyčejným elementem:

<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 = 'nový text1';
clone.children[1].textContent = 'nový text2';

parent.appendChild(clone);

Výsledek provedení kódu:

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

Viz také

metoda createElement,
pomocí které lze vytvořit nový element