HTML DOM Element cloneNode() 方法

定义和用法

cloneNode() Methode erstellt eine Kopie des Knotens und gibt diese Kopie zurück.

cloneNode() Methode klonen alle Attribute und deren Werte.

Wenn Sie noch die Nachkommen (Kinder) klonen möchten, stellen Sie den deep-Parameter ein auf true.

Rücksetzen

Um den geklonten Knoten in das Dokument zurückzusetzen, verwenden Sie:

appendChild() Methode

insertBefore() Methode

Siehe auch:

adoptNode() Methode

importNode() Methode

createElement() Methode

createTextNode() Methode

Beispiel

Beispiel 1

Kopieren Sie das <li>-Element von "myList2" nach "myList1":

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

Vor dem Klonen:

  • Kaffee
  • Tee
  • Wasser
  • Milch

Nach dem Klonen:

  • Kaffee
  • Tee
  • Milch
  • Wasser
  • Milch

Probieren Sie es selbst aus

Beispiel 2

Kopieren Sie das "demo"-Element, einschließlich seiner Attribute und seiner Kinder, und fügen Sie es dem Dokument hinzu:

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

Probieren Sie es selbst aus

Syntax

node.cloneNode(deep)

Parameter

Parameter Beschreibung
deep

Optional.

  • false - Standard. Nur Klonen des Knotens und seiner Attribute
  • true - Klonen des Knotens, seiner Attribute und seiner Nachkommen

Rückgabewert

Typ Beschreibung
Node-Objekt Der geklonte Knoten.

Browserunterstützung

element.cloneNode() Es ist eine Eigenschaft von DOM Level 1 (1998).

Es wird von allen Browsern vollständig unterstützt:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung 9-11 Unterstützung Unterstützung Unterstützung Unterstützung