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
cloneNode()
cloneNode(deep)
Parameter
deep
Optional-
Wenn
true
, wird der Knoten und sein gesamter Unterbaum, einschließlich des Textes, der in untergeordnetenText
-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
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