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

js
importNode(externalNode)
importNode(externalNode, deep)

Parameters

externalNode

The external Node or DocumentFragment 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 the externalNode in the import.

  • If deep is set to true, then externalNode and all of its descendants are copied.
  • If deep is set to false, then only externalNode is imported — the new node has no children.

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

js
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:

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

See also