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:

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

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

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

Il risultato sarà il seguente:

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