Metoda cloneNode

Metoda cloneNode permite clonarea unui element și obținerea unei copii exacte a acestuia. Această copie poate fi apoi inserată în pagină cu ajutorul metodelor prepend, append, appendChild, insertBefore sau insertAdjacentElement.

În parametru, metoda primește true sau false. Dacă este transmis true, elementul este clonat complet, împreună cu toți atribuții și elementele descendente, iar dacă false - doar elementul în sine (fără elementele descendente).

Sintaxă

element.cloneNode(true sau false);

Exemplu

Să facem o copie a blocului cu clasa elem și să o inserăm la sfârșitul blocului #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);

Rezultatul executării codului:

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

Exemplu

Cu clonul obținut se poate lucra ca cu un element obișnuit:

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

Rezultatul executării codului:

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

Vedeți și

metoda createElement,
cu ajutorul căreia se poate crea un element nou