JavaScript Document append() Method

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

Definition

document.append() inserts one or more Node objects or strings after the last child of the Document. Strings become Text nodes. On a normal loaded page, you usually want document.body.append() instead.

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

Syntax

Call document.append. Start with this line.

JavaScript
document.append(…nodesOrStrings)
CallWhat it does
document.append(…nodesOrStrings)Primary signature.
document.append(...)Call with the arguments your case needs.

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

Library declarations
JavaScript
document.append(…nodesOrStrings)

Parameters

ParameterDescription
param1…paramNRequired. Nodes and/or strings to insert

Return Value

Return ValueDescription
*Always undefined

JavaScript Examples

Example 1 — Append a Root to new Document()

MDN pattern: attach an <html> root to an empty document.

JavaScript
const doc = new Document();
const html = doc.createElement("html");

doc.append(html);

console.log(doc.children.length);              // 1
console.log(doc.documentElement === html);     // true
Try It Yourself

How It Works

  1. Start empty. new Document() has no element children yet.
  2. Create the root. Use that document’s createElement("html").
  3. Append the root. doc.append(html) makes it the document element.
  4. Verify. children.length is 1 and documentElement matches.

Example 2 — Live Page Throws HierarchyRequestError

A loaded HTML document already has a root. Appending another html fails.

JavaScript
const html = document.createElement("html");

try {
  document.append(html);
} catch (err) {
  console.log(err.name);
  // "HierarchyRequestError"
}
Try It Yourself

How It Works

  1. The page already has <html>. A Document may have only one element child of that kind.
  2. Try to append another. The engine rejects an invalid tree.
  3. Catch the error. Name is HierarchyRequestError (MDN).
  4. Fix. Append under body (or another element), not onto document.

Example 3 — Everyday Content with body.append()

Same ParentNode API on an element — the usual way to add content to a page.

JavaScript
const note = document.createElement("p");
note.textContent = "Hello";

document.body.append(note, " from append");

console.log(document.body.lastChild.textContent);
// " from append"
console.log(note.parentNode === document.body);
// true
Try It Yourself

How It Works

  1. Create a paragraph. This is normal page content, not a document root.
  2. Append to body. Pass a node and a string in one call.
  3. String becomes text. The last child is a Text node with that string.
  4. Why this path. On live pages, Element.append / body.append is the safe ParentNode append.
Compatibility

Browser Support

Document.append() is a browser DOM API marked Baseline Widely available on MDN (across browsers since April 2018).

✓ Baseline Widely available

Document.append()

ParentNode append on Document — build roots on new Document(); use body.append on live pages.

Baseline Widely available
Google Chrome 54+
Yes
Microsoft Edge 17+
Yes
Mozilla Firefox 89+
Yes
Apple Safari 10+
Yes
Opera 41+
Yes
Internet Explorer No
No
append() Excellent in browsers

Bottom line: Safe in modern browsers. On a loaded page prefer document.body.append(). See the MDN Document.append() reference.

Frequently Asked Questions

It inserts one or more Node objects or strings after the last child of the Document. Strings become Text nodes. The return value is undefined.
No. MDN marks Document.append() as Baseline Widely available (across browsers since April 2018). It is not Deprecated, Experimental, or Non-standard.
On a loaded HTML page, use document.body.append() (or Element.append) to add content. document.append() is mainly for attaching a root html or svg element to a new empty Document().
undefined. Check document.children or documentElement to verify what was added.
A live HTML document already has a root html element. Appending another one throws HierarchyRequestError because the tree would be invalid.
append() accepts multiple nodes and strings and returns undefined. appendChild() accepts one Node and returns that child.

Next: ariaNotify()

Learn document-level screen reader announcements.

ariaNotify() 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)

19 people found this page helpful

JavaScript Document adoptNode() Method JavaScript Document ariaNotify() Method