JavaScript Document adoptNode() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word ADOPTNODE

Definition

document.adoptNode() moves a node from another document into the current document. The node’s ownerDocument changes, and it is removed from its old parent (if any). It does not insert the node into the page by itself.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call document.adoptNode. Start with this line.

JavaScript
document.adoptNode(externalNode)
CallWhat it does
document.adoptNode(externalNode)Primary signature.
document.adoptNode(...)Call with the arguments your case needs.

Built into the browser. Call adoptNode(...) on document — no import required.

Library declarations
JavaScript
document.adoptNode(externalNode)

Parameters

ParameterDescription
externalNodeRequired. Node from another document to move
Insert stepRequired. Adoption alone does not attach it to the tree

Return Value

Return ValueDescription
*The same node, now owned by this document

JavaScript Examples

Example 1 — Adopt a Node and Append It

Create a paragraph in another document, adopt it, then append it to the page.

JavaScript
const other = document.implementation.createHTMLDocument("demo");
const p = other.createElement("p");
p.textContent = "Adopted paragraph";

const adopted = document.adoptNode(p);
document.body.appendChild(adopted);

console.log(adopted.textContent);
// "Adopted paragraph"
console.log(adopted.ownerDocument === document);
// true
Try It Yourself

How It Works

  1. Make another document. createHTMLDocument gives a separate HTML document.
  2. Create the node there. The paragraph’s ownerDocument is other.
  3. Adopt into this page. document.adoptNode(p) moves ownership to document.
  4. Append. appendChild puts the node in the tree so it appears on the page.

Example 2 — parentNode Stays null Until Insert

Adoption changes ownership only. The node is not in the tree until you insert it.

JavaScript
const other = document.implementation.createHTMLDocument("demo");
const el = other.createElement("span");
el.textContent = "hi";

const adopted = document.adoptNode(el);

console.log(adopted.parentNode); // null
document.body.appendChild(adopted);
console.log(adopted.parentNode === document.body); // true
Try It Yourself

How It Works

  1. Adopt the element. Ownership switches to the current document.
  2. Check parentNode. MDN: it is null because nothing has inserted it yet.
  3. Append to body. Now the node has a parent in the live tree.
  4. Takeaway. Always pair adopt/import with an insert step when you want it on screen.

Example 3 — adoptNode() vs importNode()

Adoption moves the original; import clones and leaves the source in place.

JavaScript
const other = document.implementation.createHTMLDocument("demo");
const a = other.createElement("p");
a.textContent = "A";
other.body.appendChild(a);

const b = other.createElement("p");
b.textContent = "B";
other.body.appendChild(b);

document.adoptNode(a);                 // moves A
document.importNode(b, true);          // copies B

console.log(other.body.contains(a)); // false
console.log(other.body.contains(b)); // true
Try It Yourself

How It Works

  1. Put two paragraphs in other. Both start in the source document body.
  2. Adopt A. The original leaves other.body → contains(a) is false.
  3. Import B. A clone is made; the original B stays → contains(b) is true.
  4. Choose wisely. Move with adopt; keep the source with import.
Compatibility

Browser Support

Document.adoptNode() is a browser DOM API marked Baseline Widely available on MDN. It works in every modern browser — no polyfill needed for ordinary web apps.

✓ Baseline Widely available

Document.adoptNode()

Supported in Chrome, Firefox, Safari, Edge, Opera, and Internet Explorer 9+.

Baseline Widely available
Google Chrome All modern versions
Yes
Microsoft Edge All modern versions
Yes
Mozilla Firefox All modern versions
Yes
Apple Safari All modern versions
Yes
Opera All modern versions
Yes
Internet Explorer IE 9+
Yes
adoptNode() Excellent in browsers

Bottom line: Safe to use in browsers. Focus on move-vs-copy (importNode) and always inserting after adopt. See the MDN adoptNode() reference.

Frequently Asked Questions

It transfers a node (and its subtree) from another document into the current document. The node is removed from its original document if it had a parent, and ownerDocument becomes the current document.
No. MDN marks Document.adoptNode() as Baseline Widely available. It is not Deprecated, Experimental, or Non-standard.
The adopted node in the scope of the current document. After the call, the return value and the original externalNode reference are the same object.
Adoption only changes ownership. The node is not inserted into the tree yet, so parentNode stays null until you appendChild, append, or similar.
adoptNode() moves the original node. importNode() clones the node into the current document and leaves the source unchanged.
Use importNode() when you need a copy in the current document while keeping the original in the source document (for example, cloning from a template or iframe without removing it).

Next: append()

Learn how to insert nodes (and text) at the end of a parent.

append() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

18 people found this page helpful

JavaScript Document parseHTMLUnsafe() Method JavaScript Document append() Method