Метод cloneNode

Метод cloneNode омогућава клонирање елемента и добијање његове тачне копије. Ову копију затим можете уметнути на страницу помоћу метода prepend, append, appendChild, insertBefore или insertAdjacentElement.

У параметру метод добија true или false. Ако је прослеђено true, елемент се клонира потпуно, заједно са свим атрибутима и потомцима, а ако је false - само сам елемент (без потомака).

Синтакса

element.cloneNode(true или false);

Пример

Направићемо копију блока са класом elem и уметнути га на крај блока #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);

Резултат извршавања кода:

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

Пример

Са добијеним клоном можете радити као са обичним елементом:

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

Резултат извршавања кода:

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

Погледајте такође

метод createElement,
који се користи за креирање новог елемента