JavaScript Document importNode() Method

What You’ll Learn

document.importNode() is an instance method that copies a Node or DocumentFragment from another document so you can insert the copy into the current page later (see MDN Document: importNode()). Learn the deep flag, why parentNode stays null until insert, and how it differs from adoptNode() and cloneNode().

Introduction

Nodes from an iframe, a parsed HTML document, a detached Document, or <template>.content belong to a different document than your main page ( ownerDocument.

MDN: importNode() creates a copy of that foreign node for the calling document. The imported node is not in the tree yet — you still call appendChild() or insertBefore() to show it.

Related tutorials: adoptNode(), cloneNode(), appendChild(), ownerDocument.

Understanding document.importNode()

An instance method on the Document interface (MDN). Call it on the document that will own the copy.

• externalNode — the Node or DocumentFragment to import (MDN).
• deep (optional) — default false; true copies the whole subtree (MDN).
• Returns — the copied importedNode in the importing document’s scope (MDN).
• Source unchanged — original stays where it was (MDN).
• parentNode is null — until you insert into the tree (MDN).
• Not inserted yet — you must still append/insert (MDN).

📝 Syntax

General forms of Document.importNode (MDN):

importNode(externalNode)
importNode(externalNode, deep)

Parameters

• externalNode — the external Node or DocumentFragment to import into the current document (MDN).
• deep Optional — boolean, default false. If true, externalNode and all descendants are copied. If false, only externalNode is imported — the new node has no children (MDN).

Return value

The copied importedNode in the scope of the importing document. Note: importedNode.parentNode is null until insertion (MDN).

MDN quick sample

const iframe = document.querySelector("iframe");
const oldNode = iframe.contentWindow.document.getElementById("myNode");
const newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);

⚖️ importNode vs adoptNode vs cloneNode

Examples Gallery

Examples follow MDN Document: importNode(). Import first, then insert with appendChild.

const otherDoc = new Document();
const p = otherDoc.createElement("p");
p.textContent = "Imported paragraph";

const copy = document.importNode(p, true);
document.getElementById("host").appendChild(copy);

console.log(copy.textContent); // "Imported paragraph"
console.log(copy === p);       // false — different object

Imported paragraph
false

const otherDoc = document.implementation.createHTMLDocument("");
const wrap = otherDoc.createElement("div");
wrap.innerHTML = "Hi there";

const shallow = document.importNode(wrap, false);
const deep = document.importNode(wrap, true);

console.log(shallow.childNodes.length); // 0
console.log(deep.textContent);          // "Hi there"

0
Hi there

const iframe = document.querySelector("iframe");
const oldNode = iframe.contentWindow.document.getElementById("myNode");
const newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
// Original #myNode remains inside the iframe document

Copy appears in #container; iframe keeps original

const template = document.getElementById("card-tpl");
const fragment = document.importNode(template.content, true);
document.getElementById("host").appendChild(fragment);

Template markup rendered in #host

const otherDoc = document.implementation.createHTMLDocument("");
const a = otherDoc.createElement("span");
a.textContent = "A";
const b = otherDoc.createElement("span");
b.textContent = "B";
otherDoc.body.append(a, b);

const imported = document.importNode(a, true);
const adopted = document.adoptNode(b);

console.log({
  importSameRef: imported === a,              // false
  sourceStillHasA: otherDoc.body.contains(a), // true
  adoptSameRef: adopted === b,                // true
  sourceStillHasB: otherDoc.body.contains(b)  // false
});

{
  importSameRef: false,
  sourceStillHasA: true,
  adoptSameRef: true,
  sourceStillHasB: false
}

🚀 Common Use Cases

• Iframe widgets — copy markup from a same-origin iframe (MDN example).
• HTML templates — document.importNode(template.content, true) (MDN).
• Parsed Documents — copy nodes from DOMParser / parseHTML() results.
• Detached Documents — clone nodes built with new Document().
• Custom elements — clone into the target document’s registry context (MDN).
• When you must move — use adoptNode instead of copying.

📝 Notes

• MDN: Baseline Widely available since July 2015.
• MDN: import or adopt foreign nodes before inserting (Firefox may not enforce; still follow the rule).
• MDN: default deep is false.
• MDN: prefer importNode over cloneNode when cloning into another document / template content.
• Event listeners on the original are not copied (same idea as cloneNode).
• Related: adoptNode(), cloneNode(), appendChild().

💡 Best Practices