Metodo cloneNode() dell'Elemento DOM HTML

Definizione e uso

Metodo cloneNode() Metodo che crea una copia del nodo e restituisce la copia.

Metodo cloneNode() Metodo che clona tutti gli attributi e i loro valori.

Se si desidera clonare anche i discendenti (figli), impostare il parametro deep a true.

Inserimento

Per inserire nuovamente il nodo clonato nel documento, utilizzare:

Metodo appendChild()

Metodo insertBefore()

Vedi anche:

Metodo adoptNode()

Metodo importNode()

Metodo createElement()

Metodo createTextNode()

Esempio

Esempio 1

Copia l'elemento <li> da "myList2" a "myList1":

const node = document.getElementById("myList2").lastChild;
const clone = node.cloneNode(true);
document.getElementById("myList1").appendChild(clone);

Prima della clonazione:

  • Caffè
  • Tè
  • Acqua
  • Latte

Dopo la clonazione:

  • Caffè
  • Tè
  • Latte
  • Acqua
  • Latte

Prova personalmente

Esempio 2

Copia l'elemento "demo", inclusi i suoi attributi e i suoi figli, e aggiungilo al documento:

const node = document.getElementById("demo");
const clone = node.cloneNode(true);
document.body.appendChild(clone);

Prova personalmente

Sintassi

node.cloneNode(deep)

Parametro

Parametro Descrizione
deep

Opzionale.

  • false - Predefinito. Clona solo il nodo e i suoi attributi
  • true - Clona il nodo, i suoi attributi e i suoi discendenti

Valore di ritorno

Tipo Descrizione
Oggetto Node Nodo clonato.

Supporto del browser

element.cloneNode() È una funzionalità del DOM Level 1 (1998).

Tutti i browser lo supportano completamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto 9-11 Supporto Supporto Supporto Supporto