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