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 importNode() method of the Document interface 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.
The Node.cloneNode() method also creates a copy of a node. The difference is that importNode() clones the node in the context of the calling document, whereas cloneNode() uses the document of the node being cloned. The document context determines the CustomElementRegistry for constructing any custom elements. For this reason, to clone nodes to be used in another document, use importNode() on the target document. The HTMLTemplateElement.content is owned by a separate document, so it should also be cloned using document.importNode() so that custom element descendants are constructed using the definitions in the current document. See the Node.cloneNode() page's examples for more details.
Syntax
importNode(externalNode)
importNode(externalNode, deep)
Parameters
externalNode-
The external
NodeorDocumentFragmentto import into the current document. deepOptional-
A boolean flag, whose default value is
false, which controls whether to include the entire DOM subtree of theexternalNodein the import.- If
deepis set totrue, thenexternalNodeand all of its descendants are copied. - If
deepis set tofalse, then onlyexternalNodeis 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
Using importNode()
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 # ref-for-dom-document-importnode① |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
importNode
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
document.adoptNode(), which behaves very similar to this methodNode.appendChild()Node.insertBefore()