Clonazione di elementi in JavaScript

In questa lezione impareremo come ottenere copie degli elementi. Con queste copie potremo lavorare come con elementi normali - modificarli e inserirli nel punto desiderato della pagina. Il processo di ottenimento di copie degli elementi è chiamato clonazione.

È possibile clonare un elemento utilizzando il metodo cloneNode. A questo metodo bisogna passare true o false come parametro. Se viene passato true, l'elemento viene clonato completamente, insieme a tutti gli attributi e gli elementi figli, mentre se false - solo l'elemento stesso.

Vediamo un esempio. Supponiamo di avere il seguente codice:

<div id="parent">
	<div class="elem">
		<p>primo paragrafo</p>
		<p>secondo paragrafo</p>
	</div>
</div>

Creiamo una copia del blocco con classe elem e inseriamola alla fine del blocco #parent:

let parent = document.querySelector('#parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
parent.appendChild(clone);

Il risultato sarà il seguente:

<div id="parent">
	<div class="elem">
		<p>primo paragrafo</p>
		<p>secondo paragrafo</p>
	</div>
	<div class="elem">
		<p>primo paragrafo</p>
		<p>secondo paragrafo</p>
	</div>
</div>

Dato un input. Data un pulsante. Alla pressione del pulsante clonate questo input.