Die cloneNode() Methode des Node Interfaces gibt eine Kopie des Knotens zurück, auf dem diese Methode aufgerufen wurde. Ihr Parameter steuert, ob auch die im Knoten enthaltene Unterstruktur geklont wird oder nicht.

Standardmäßig kopiert das Klonen eines Knotens alle seine Attribute und deren Werte einschließlich der über Attribute spezifizierten Event-Listener. Durch Setzen des deep-Parameters kann auch die im Knoten enthaltene Unterstruktur kopiert werden. Sie kopiert nicht andere interne Daten, wie Event-Listener, die mit addEventListener() oder onevent Eigenschaften (z. B. node.onclick = someFunction) hinzugefügt wurden, oder das gemalte Bild für ein <canvas> Element.

Die Document.importNode() Methode erstellt ebenfalls eine Kopie eines Knotens. Der Unterschied besteht darin, dass importNode() den Knoten im Kontext des aufrufenden Dokuments klont, während cloneNode() das Dokument des zu klonenden Knotens verwendet. Der Dokumentenkontext bestimmt das CustomElementRegistry für die Konstruktion aller benutzerdefinierten Elemente. Aus diesem Grund sollte importNode() im Ziel-Dokument verwendet werden, um Knoten zu klonen, die in einem anderen Dokument verwendet werden sollen. Der HTMLTemplateElement.content gehört zu einem separaten Dokument, daher sollte er ebenfalls mit document.importNode() geklont werden, damit benutzerdefinierte Elementnachfahren mit den Definitionen im aktuellen Dokument konstruiert werden.

Syntax

cloneNode()
cloneNode(deep)

Parameter

deep Optional

Wenn true, dann wird der Knoten und seine gesamte Unterstruktur, einschließlich des Textes, der sich in untergeordneten Text Knoten befinden kann, ebenfalls kopiert.

Wenn false oder weggelassen, wird nur der Knoten geklont. Die Unterstruktur, einschließlich eines Textes, den der Knoten enthält, wird nicht geklont.

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

Standardmäßig auf false gesetzt.

Rückgabewert

Der neue geklonte Node. Der geklonte Knoten hat keinen Elternknoten und ist kein Bestandteil des Dokuments, bis er zu einem anderen Knoten hinzugefügt wird, der Teil des Dokuments ist, indem Node.appendChild() oder eine ähnliche Methode verwendet wird.

Beispiel

Verwenden von cloneNode()

const p = document.getElementById("para1");
const p2 = p.cloneNode(true);

Verwenden von cloneNode() mit Vorlagen

Vermeiden Sie die Verwendung von cloneNode() auf dem Inhalt eines <template> Elements, da benutzerdefinierte Elemente in der Vorlage nicht aktualisiert werden, bis sie in das Dokument eingefügt sind.

class MyElement extends HTMLElement {
  constructor() {
    super();
    console.log("MyElement created");
  }
}
customElements.define("my-element", MyElement);
const template = document.createElement("template");
template.innerHTML = `<my-element></my-element>`;
const clone = template.content.cloneNode(true);
// No log here; my-element is undefined in the template's document
customElements.upgrade(clone);
// Still no log; my-element is still undefined in the template's document
document.body.appendChild(clone);
// Logs "MyElement created"; my-element is now upgraded

Verwenden Sie stattdessen document.importNode(), um den Vorlageninhalt zu klonen, sodass alle benutzerdefinierten Elemente mit den Definitionen im aktuellen Dokument aktualisiert werden:

const clone = document.importNode(template.content, true);
// Logs "MyElement created"; my-element is upgraded using document's definitions
document.body.appendChild(clone);

Spezifikationen

Browser-Kompatibilität