HTML DOM Element cloneNode() metoden

Definiera och användning

cloneNode() metoden skapar en kopia av noden och returnerar kopian.

cloneNode() metoden klonar alla egenskaper och deras värden.

Om du vill klona efterkommande element (underkomponenter) också, sätt deep-parametern till true.

Lägg tillbaka

För att lägga till det klonade noden tillbaka i dokumentet, använd:

appendChild() metod

insertBefore() metod

Se också:

adoptNode() metod

importNode() metod

createElement() metod

createTextNode() metod

Exempel

Exempel 1

Kopiera <li>-elementet från "myList2" till "myList1":

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

Innan kloning:

  • Kaffe
  • Te
  • Vatten
  • Mjölk

Efter kloning:

  • Kaffe
  • Te
  • Mjölk
  • Vatten
  • Mjölk

Prova själv

Exempel 2

Kopiera "demo"-elementet, inklusive dess egenskaper och underelement, och lägg till det i dokumentet:

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

Prova själv

Syntax

node.cloneNode(deep)

Parameter

Parameter Beskrivning
deep

Valfritt.

  • false - Standard. Klonar endast noden och dess egenskaper
  • true - Klonar noden, dess egenskaper och efterkommande element

Returvärde

Typ Beskrivning
Node-objekt Klonade noder.

Webbläsarstöd

element.cloneNode() är en DOM Level 1 (1998)-funktion.

Alla webbläsare stöder det fullt ut:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd 9-11 Stöd Stöd Stöd Stöd