Metodo cloneNode

Il metodo cloneNode consente di clonare un elemento e ottenere la sua copia esatta. Questa copia può poi essere inserita nella pagina utilizzando i metodi prepend, append, appendChild, insertBefore o insertAdjacentElement.

Il metodo riceve come parametro true o false. Se viene passato true, l'elemento viene clonato completamente, con tutti i suoi attributi e elementi figli, mentre se false - solo l'elemento stesso (senza elementi figli).

Sintassi

elemento.cloneNode(true o false);

Esempio

Creiamo una copia del blocco con classe elem e inseriamola alla fine del blocco #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);

Risultato dell'esecuzione del codice:

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

Esempio

Con il clone ottenuto è possibile lavorare come con un elemento normale:

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

Risultato dell'esecuzione del codice:

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

Vedi anche

metodo createElement,
che consente di creare un nuovo elemento