Il metodo importNode() in Javascript
La funzione importNode() del linguaggio Javascript può clonare il contenuto da un nodo a un altro, senza cambiare nulla nel div originale.
importNode()
In altre parole, la funzione importNode() mi consente di selezionare un nodo, che può essere un elemento, del testo o qualsiasi altro tipo di nodo, da un documento HTML o XML per clonarlo in un altro documento, oppure all'interno dello stesso documento.
A cosa serve? È utile per trasferire nodi tra sezioni dello stesso documento HTML, in un iframe o in nuovi documenti creati con document.implementation.createHTMLDocument(). Questa tecnica è vantaggiosa nella gestione di documenti multipli, come iframe o nella manipolazione di documenti XML o SVG con JavaScript, perché mi permette spostamenti sicuri e controllati di dati ed elementi, riducendo rischi di conflitti o perdite.
La sintassi di `importNode()` è la seguente:
var nodoClonato = document.importNode(nodoDaClonare, deep);
Dove i parametri hanno questo significato:
- `nodoDaClonare`: è il nodo che voglio clonare.
- `deep` (booleano): se impostato su `true`, il nodo verrà clonato con tutti i suoi nodi figli (clonazione profonda). Se impostato su `false`, verrà clonato solo il nodo stesso senza i figli.
Ecco un esempio pratico.
Ho il seguente documento HTML:
<!DOCTYPE html>
<html>
<body>
<div id="primodiv">
<p>Prova</p>
</div>
<div id="secondodiv"></div>
<script>
// Ottengo il nodo che vogliamo clonare
var nodoOriginale = document.querySelector("#primodiv p");
// Uso importNode per clonare il nodo. Impostiamo 'true' per clonare anche eventuali nodi figli.
var nodoClonato = document.importNode(nodoOriginale, true);
// Ora posso aggiungere il nodo clonato al nuovo
document.getElementById("secondodiv").appendChild(nodoClonato);
</script>
</body>
</html>
In questo script seleziono il paragrafo del nodo con id #primadiv e lo salvo nella variabile "nodoOriginale".
Poi importo il contenuto del paragrafo <p> contenuto nel div tramite importNode() e lo salvo nella variabile "nodoClonato".
Infine, aggiungo il contenuto clonato nel div con id #secondodiv.
Il risultato è il seguente:
Prova
Prova
Il contenuto del primo <div> viene mostrato anche nel secondo.
E così via.
