Metoda cloneNode

Metoda cloneNode lejon klonimin e një elementi dhe marrjen e një kopje të saktë të tij. Kjo kopje pastaj mund të futet në faqe me ndihmën e metodave prepend, append, appendChild, insertBefore ose insertAdjacentElement.

Si parametër, metoda merr true ose false. Nëse i jepet true, elementi klonohet plotësisht, me të gjithë atributet dhe elementët fëmijë, ndërsa nëse false - vetëm elementi në vetvete (pa elementët fëmijë).

Sintaksa

element.cloneNode(true ose false);

Shembull

Le të bëjmë një kopje të bllokut me klasën elem dhe ta fusim atë në fund të bllokut #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);

Rezultati i ekzekutimit të kodit:

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

Shembull

Me klonin e marrë mund të punohet si me një element të zakonshëm:

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

Rezultati i ekzekutimit të kodit:

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

Shihni gjithashtu

metoda createElement,
me të cilin mund të krijohet një element i ri