Методот cloneNode

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

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

Синтакса

елемент.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,
кој се користи за креирање на нов елемент