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

javascriptelemento.cloneNode(true o false);

Esempio

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

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

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

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

Risultato dell'esecuzione del codice:

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

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

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

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