Document: importNode() method
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.
The Document
object's importNode()
method creates a copy of a
Node
or DocumentFragment
from another document, to be
inserted into the current document later.
The imported node is not yet included in the document tree. To include it, you need to
call an insertion method such as appendChild()
or
insertBefore()
with a node that is
currently in the document tree.
Unlike document.adoptNode()
, the original node is not removed from its
original document. The imported node is a clone of the original.
Syntax
importNode(externalNode)
importNode(externalNode, deep)
Parameters
externalNode
-
The external
Node
orDocumentFragment
to import into the current document. deep
Optional-
A boolean flag, whose default value is
false
, which controls whether to include the entire DOM subtree of theexternalNode
in the import.-
If
deep
is set totrue
, thenexternalNode
and all of its descendants are copied. -
If
deep
is set tofalse
, then onlyexternalNode
is imported — the new node has no children.
-
If
Return value
The copied importedNode
in the scope of the importing document.
Note: importedNode
's Node.parentNode
is null
, since it has not yet been inserted into the document tree!
Examples
const iframe = document.querySelector("iframe");
const oldNode = iframe.contentWindow.document.getElementById("myNode");
const newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
Notes
Before they can be inserted into the current document, nodes from external documents should either be:
- cloned using
document.importNode()
; or - adopted using
document.adoptNode()
.
Note: Although Firefox doesn't currently enforce this rule, we encourage you to follow this rule for improved future compatibility.
For more on the Node.ownerDocument
issues, see the W3C DOM FAQ.
Specifications
Specification |
---|
DOM Standard # ref-for-dom-document-importnode① |
Browser compatibility
BCD tables only load in the browser
See also
document.adoptNode()
, which behaves very similar to this methodNode.appendChild()
Node.insertBefore()