Node: cloneNode() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die cloneNode()-Methode der Node-Schnittstelle gibt ein Duplikat des Knotens zurück, auf dem diese Methode aufgerufen wurde. Ihr Parameter steuert, ob der im Knoten enthaltene Unterbaum ebenfalls geklont wird oder nicht.

Das Klonen eines Knotens kopiert alle seine Attribute und deren Werte, einschließlich intrinsischer (inline) Listener. Es kopiert nicht Event-Listener, die mit addEventListener() hinzugefügt wurden oder die den Element-Eigenschaften zugewiesen sind (z. B. node.onclick = someFunction). Zusätzlich wird bei einem <canvas>-Element das gemalte Bild nicht kopiert.

Warnung:>cloneNode() kann dazu führen, dass doppelte Element-IDs in einem Dokument entstehen!

Hat der Originalknoten ein id-Attribut und soll der Klon im selben Dokument platziert werden, sollten Sie die ID des Klons ändern, um eindeutig zu sein.

Auch name-Attribute müssen möglicherweise geändert werden, abhängig davon, ob doppelte Namen erwartet werden.

Um einen Knoten zu klonen, der in ein anderes Dokument eingefügt werden soll, verwenden Sie stattdessen Document.importNode().

Syntax

js
cloneNode()
cloneNode(deep)

Parameter

deep Optional

Wenn true, dann wird der Knoten und sein gesamter Unterbaum, einschließlich Text, der in untergeordneten Text-Knoten enthalten sein kann, ebenfalls kopiert.

Wenn false, wird nur der Knoten geklont. Der Unterbaum, einschließlich eines etwa enthaltenen Textes, wird nicht geklont.

Beachten Sie, dass deep keine Auswirkung auf void-Elemente hat, wie die <img>- und <input>-Elemente.

Rückgabewert

Der neue geklonte Node. Der geklonte Knoten hat keinen Elternknoten und ist kein Teil des Dokuments, bis er einem anderen Knoten hinzugefügt wird, der Teil des Dokuments ist, mithilfe von Node.appendChild() oder einer ähnlichen Methode.

Beispiel

js
let p = document.getElementById("para1");
let p_prime = p.cloneNode(true);

Spezifikationen

Specification
DOM
# ref-for-dom-node-clonenode①

Browser-Kompatibilität