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 des Node-Interfaces gibt ein Duplikat des Knotens zurück, auf dem diese Methode aufgerufen wurde. Ihr Parameter steuert, ob der in einem 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 die mit addEventListener() hinzugefügten Ereignis-Listener oder solche, die Eigenschaften eines Elements zugewiesen sind (z. B. node.onclick = someFunction). Darüber hinaus wird bei einem <canvas>-Element das gemalte Bild nicht kopiert.

Warning: cloneNode() kann zu doppelten Element-IDs in einem Dokument führen!

Wenn der ursprüngliche Knoten ein id-Attribut hat und der Klon im selben Dokument platziert wird, sollten Sie die ID des Klons ändern, um einzigartig zu sein.

Auch name-Attribute müssen möglicherweise geändert werden, je nachdem, 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, wird der Knoten und sein gesamter Unterbaum, einschließlich des Textes, der in untergeordneten Text-Knoten enthalten sein kann, ebenfalls kopiert.

Wenn false, wird nur der Knoten geklont. Der Unterbaum, einschließlich jeglichen Textes, den der Knoten enthält, wird nicht geklont.

Beachten Sie, dass deep keinen Einfluss auf void elements hat, wie die <img>- und <input>-Elemente.

Rückgabewert

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

Beispiel

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

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser