Il metodo cloneNode in Javascript

Il metodo cloneNode() duplica un nodo esistente nel DOM (Document Object Model).

cloneNode(true/false)

In altre parole, questo metodo mi permette di fare una copia esatta di un nodo, inclusi i suoi attributi e, opzionalmente, tutto il suo contenuto.

Il nodo duplicato può poi essere inserito in qualsiasi punto del DOM.

Nota. Il metodo cloneNode() ha un parametro opzionale deep tra le parentesi tonde che, quando è impostato su "true", attua una copia profonda. In questo caso, il nodo e tutti i suoi nodi figli, cioè, tutto il suo contenuto, vengono clonati. Se, invece, è impostato su "false", esegue una copia superficiale. In quest'altro caso solo il nodo stesso viene clonato, escludendo i suoi figli.

Per fare un esempio considero questo documento HTML.

<html>
<body>
<p id="paragrafoOriginale">Questo è un paragrafo da clonare.</p>
<script>
var paragrafoOriginale = document.getElementById('paragrafoOriginale');
var clone = paragrafoOriginale.cloneNode(true);
document.body.appendChild(clone);
</script>
</body>
</html>

Questo script individua il nodo con id="paragrafoOriginale" tramite il metodo document.getElementById('paragrafoOriginale').

Poi lo clona con la proprietà cloneNode(true). Essendo impostato cloneNode() su "True", si tratta di una copia profonda. Quindi, vengono copiati anche i nodi figli del paragrafo.

Infine, aggiunge la copia al nodo <body> tramite il metodo appendChild(clone).

Il risultato sullo schermo è la duplicazione del nodo in questione.

Questo è un paragrafo da clonare.
Questo è un paragrafo da clonare.

Ora ripeto lo stesso esempio impostando il parametro di nodeClone() su False.

<html>
<body>
<p id="paragrafoOriginale">Questo è un paragrafo da <b>clonare</b>.</p>
<script>
var paragrafoOriginale = document.getElementById('paragrafoOriginale');
var clone = paragrafoOriginale.cloneNode(false);
document.body.appendChild(clone);
</script>
</body>
</html>

In questo esempio, solo l'elemento <p> viene clonato ma non i suoi contenuti interni.

Quando usare cloneNode()?

Il metodo cloneNode() è particolarmente utile quando ho bisogno di duplicare elementi nel DOM che hanno già uno stile specifico, eventi, o altre proprietà che voglio mantenere.

Ad esempio, per avere un form di input pre-configurato che voglio duplicare per l'input dell'utente.

Nota. Gli ID devono essere unici in una pagina. Se clono un elemento con un ID, poi devo assicurarmi di cambiare l'ID del nodo clonato per mantenere l'unicità. Inoltre, è necessario riassegnare gli eventi se necessario.

E così via.