JavaScript Document body Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word BODY

Definition

document.body is the <body> (or <frameset>) node of the current document, or null if none exists (MDN). It is the usual container for visible page content.

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use document.body. Start with this line.

JavaScript
document.body
CallWhat it does
document.bodyPrimary signature.

Built into the browser. Read or assign document.body — no import required.

Library declarations
JavaScript
document.body

Parameters

ParameterDescription
Writable?Required. Replacing clears old body children (MDN)

Return Value

Return ValueDescription
*HTMLBodyElement | HTMLFrameSetElement | null

JavaScript Examples

Example 1 — Read document.body.id (MDN)

Given <body id="oldBodyElement">, read the id from JavaScript.

JavaScript
// HTML: <body id="oldBodyElement">…</body>
console.log(document.body.id);      // "oldBodyElement"
console.log(document.body.tagName); // "BODY"
Try It Yourself

How It Works

  1. Body is an element — same DOM API as any other node.
  2. Read id from the attribute on <body>.
  3. Read tagName — usually "BODY" in HTML documents.
  4. No mutation — this example only inspects.

Example 2 — Append a Child to body

Create an element and attach it to the page content root.

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

console.log(document.body.lastElementChild.textContent);
Try It Yourself

How It Works

  1. Create a node with createElement.
  2. Set text before attaching it.
  3. Append with appendChild onto document.body.
  4. Preferred pattern for adding UI — safer than replacing the whole body.

Example 3 — Replace document.body (MDN)

The property is settable. Assigning a new body removes the old body’s children (MDN).

JavaScript
const newBody = document.createElement("body");
newBody.id = "newBodyElement";
newBody.textContent = "Replaced body";

document.body = newBody;
console.log(document.body.id); // "newBodyElement"
Try It Yourself

How It Works

  1. Build a new <body> with createElement("body").
  2. Assign it to document.body (MDN settable API).
  3. Old children disappear — MDN: replacement clears the previous body’s content.
  4. Use rarely — prefer appending or updating nodes inside the existing body.
Compatibility

Browser Support

Document.body is a core DOM property. MDN marks it Baseline Widely available (since May 2018). It works across modern browsers and long-standing engines.

✓ Baseline · Widely available

Document.body

Returns the document’s body or frameset element, or null. Safe for everyday web apps.

99% Widely available
Google Chrome Yes
Yes
Microsoft Edge Yes
Yes
Mozilla Firefox Yes
Yes
Apple Safari Yes
Yes
Opera Yes
Yes
Internet Explorer Yes (legacy)
Yes
document.body Excellent

Bottom line: Use freely in all supported browsers. See the MDN Document.body reference.

Frequently Asked Questions

MDN: the <body> or <frameset> node of the current document, or null if no such element exists. Typically an HTMLBodyElement.
No. MDN marks Document.body as Baseline Widely available (since May 2018). It is not Deprecated, Experimental, or Non-standard.
Yes. The property is settable. MDN: setting a new body effectively removes all current children of the existing <body>.
document.documentElement is the root <html> element. document.body is the <body> (or frameset) that holds the page content you usually manipulate.
When the document has no body yet (for example during early parsing) or in document types without a body. Check before use in edge cases.
Yes, when you need the page content container — appending nodes, body-level styles, or reading body attributes. Prefer a more specific selector when you target one region.

Next: characterSet

Continue with the Document characterSet property.

characterSet →

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)

12 people found this page helpful

JavaScript Document bgColor Property JavaScript Document characterSet Property