JavaScript Document Constructor

Beginner
5 min read
Updated: Nov 2026
5 examples
Document
Decorative image with the word DOCUMENT

Definition

In JavaScript, new Document() creates a new Document object - an in-memory web document you can build with DOM APIs. It does not replace the live page document (window.document).

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

Syntax

Create a Document. Start with this line.

JavaScript
new Document()
CallWhat it does
new Document()Primary signature.

Built into the browser. Call new Document() — no import required.

Library declarations
JavaScript
new Document()

Parameters

ParameterDescription
newRequired. Must use the constructor form

Return Value

Return ValueDescription
*A new Document instance

JavaScript Examples

Example 1 - Basic new Document()

Create a document and check its node type and empty root.

JavaScript
const doc = new Document();

console.log(doc.nodeName);          // "#document"
console.log(doc.nodeType);          // 9
console.log(doc.documentElement);   // null
console.log(doc === document);      // false
Try It Yourself

How It Works

  1. Construct. No arguments - just new Document().
  2. Identify. nodeType === 9 marks a document node.
  3. Empty root. Nothing is appended yet, so documentElement is null.
  4. Separate object. It is not the same reference as window.document.

Example 2 - Build a Detached Tree

Create elements owned by the new document and append them.

JavaScript
const doc = new Document();
const note = doc.createElement("note");
const text = doc.createTextNode("Study DOM offline");

note.append(text);
doc.append(note);

console.log(doc.documentElement.tagName); // "NOTE"
console.log(doc.documentElement.textContent);
Try It Yourself

How It Works

  1. Own the factories. Call createElement / createTextNode on doc.
  2. Assemble. Append the text node into the element.
  3. Set the root. doc.append(note) makes note the document element.
  4. Read back. Tag name and textContent come from that detached tree.

Example 3 - vs createHTMLDocument()

HTML documents arrive with a ready skeleton; blank documents do not.

JavaScript
const blank = new Document();
const htmlDoc = document.implementation.createHTMLDocument("Demo");

console.log(blank.documentElement);             // null
console.log(htmlDoc.documentElement.tagName); // "HTML"
console.log(htmlDoc.body.tagName);            // "BODY"
console.log(htmlDoc.title);                   // "Demo"
Try It Yourself

How It Works

  1. Blank start. new Document() has no root yet.
  2. HTML shortcut. createHTMLDocument builds html/head/body for you.
  3. Convenient props. body and title work on the HTML document.
  4. Choose by goal. Use HTML when you need a page-like tree quickly.

Example 4 - Import into the Live Page

Nodes belong to their document - import before appending to the page.

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

const live = document.importNode(p, true);
document.body.append(live);

console.log(live.ownerDocument === document); // true
Try It Yourself

How It Works

  1. Create offline. The paragraph is owned by doc.
  2. Import a copy. document.importNode(p, true) clones into the live document.
  3. Append the copy. Only the imported node is safe to insert.
  4. Verify ownership. ownerDocument is now window.document.

Example 5 - Not the Live Document

Prove that constructing a Document leaves the page document alone.

JavaScript
const before = document.title;
const doc = new Document();

doc.append(doc.createElement("x"));
console.log(document.title === before); // true
console.log(doc.documentElement.tagName); // "X"
console.log(document.documentElement.tagName); // still "HTML"
Try It Yourself

How It Works

  1. Snapshot the page. Remember the current title.
  2. Mutate only doc. Appending a root affects the new document only.
  3. Page unchanged. Title and the live <html> root stay the same.
Compatibility

Browser Support

The Document() constructor is marked Baseline Widely available on MDN (since April 2018). Available in modern browsers; not Internet Explorer.

✓ Baseline · Widely available

Document()

Create in-memory Document objects across modern browsers.

97% Core tag support
Chrome Yes
Full support
Edge Yes
Full support
Firefox Yes
Full support
Safari Yes
Full support
Opera Yes
Full support
HTML element 100% supported

Bottom line: Safe for modern web apps. For HTML skeletons, also learn createHTMLDocument().

Frequently Asked Questions

It creates a new in-memory Document object. That document is separate from the live page (window.document) until you explicitly move or import nodes into the page.
No. MDN marks Document() as Baseline Widely available (since April 2018). It is not Deprecated, Experimental, or Non-standard.
No. Call it as new Document() with no arguments (MDN).
new Document() starts empty (documentElement is null until you append a root). document.implementation.createHTMLDocument(title) returns an HTML document that already has html, head, and body.
No. window.document is the browsing context's live document. new Document() only creates another Document object for building or testing trees offline.
Use importNode or adoptNode (nodes are owned by a document). Do not assume appendChild works across documents without importing or adopting first.

Next: activeElement

Read which element currently has focus in the document.

activeElement →

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)

9 people found this page helpful

JavaScript Introduction JavaScript Document activeElement Property