Dokument: importNode() Methode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die importNode() Methode des Document Interfaces erstellt eine Kopie eines Node oder DocumentFragment aus einem anderen Dokument, um diese später in das aktuelle Dokument einzufügen.
Der importierte Knoten ist noch nicht im Dokumentbaum enthalten. Um ihn hinzuzufügen, müssen Sie eine Einfügemethode wie appendChild() oder insertBefore() mit einem Knoten aufrufen, der bereits im Dokumentbaum enthalten ist.
Im Gegensatz zu document.adoptNode() wird der Originalknoten nicht aus seinem ursprünglichen Dokument entfernt. Der importierte Knoten ist eine Kopie des Originals.
Die Methode Node.cloneNode() 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 Dokumentkontext bestimmt das CustomElementRegistry für den Aufbau von benutzerdefinierten Elementen. Aus diesem Grund sollten Sie, um Knoten zu klonen, die in einem anderen Dokument verwendet werden sollten, importNode() auf dem Ziel-Dokument verwenden. Das HTMLTemplateElement.content gehört zu einem separaten Dokument, daher sollte es ebenfalls mithilfe von document.importNode() geklont werden, damit benutzerdefinierte Elemente mit den Definitionen im aktuellen Dokument erstellt werden. Siehe die Beispiele auf der Seite zu Node.cloneNode() für weitere Details.
Syntax
importNode(externalNode)
importNode(externalNode, deep)
Parameter
externalNode-
Der externe
NodeoderDocumentFragment, der in das aktuelle Dokument importiert werden soll. deepOptional-
Ein boolesches Flag, dessen Standardwert
falseist, das steuert, ob der gesamte DOM-Unterbaum desexternalNodein den Import einbezogen wird.- Wenn
deepauftruegesetzt ist, dann werdenexternalNodeund alle seine Nachkommen kopiert. - Wenn
deepauffalsegesetzt ist, dann wird nurexternalNodeimportiert — der neue Knoten hat keine Kinder.
- Wenn
Rückgabewert
Der kopierte importedNode im Kontext des importierenden Dokuments.
Hinweis:
importedNode's Node.parentNode ist null, da es noch nicht in den Dokumentbaum eingefügt wurde!
Beispiele
Verwendung von importNode()
const iframe = document.querySelector("iframe");
const oldNode = iframe.contentWindow.document.getElementById("myNode");
const newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
Anmerkungen
Bevor sie in das aktuelle Dokument eingefügt werden können, sollten Knoten aus externen Dokumenten entweder:
- mit
document.importNode()geklont werden; oder - mit
document.adoptNode()übernommen werden.
Hinweis: Obwohl Firefox diese Regel derzeit nicht durchsetzt, empfehlen wir Ihnen, diese Regel zu befolgen, um die zukünftige Kompatibilität zu verbessern.
Weitere Informationen zu den Node.ownerDocument Problemen finden Sie in den W3C DOM FAQ.
Spezifikationen
| Specification |
|---|
| DOM # ref-for-dom-document-importnode① |
Browser-Kompatibilität
Siehe auch
document.adoptNode(), die sich sehr ähnlich wie diese Methode verhältNode.appendChild()Node.insertBefore()