HTML DOM body Property
Example
Change the background color of the current document:
document.body.style.backgroundColor = "yellow";
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The body property sets or returns the document's body.
On return, this property returns the <body> element of the current document.
On set, this property overwrites all child elements inside the existing <body> element, and replaces it with the new, specified content.
Tip: The difference between this property and the document.documentElement property, is that the document.body element returns the <body> element, while the document.documentElement returns the <html> element.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| body | Yes | Yes | Yes | Yes | Yes |
Syntax
Return the body property:
document.body
Set the body property:
document.body = newContent
Property Values
| Value | Description |
|---|---|
| newContent | Specifies the new content for <body> |
Technical Details
| Return Value: | A reference to the Body Object, which represents a <body> element |
|---|---|
| DOM Version | Core Level 1 Document Object |
More Examples
Example
Get the HTML content of the current document:
var x =
document.body.innerHTML;
Try it Yourself »
Example
Change the HTML content of the current document (will overwrite all existing HTML elements inside <body>):
document.body.innerHTML = "Some new HTML content";
Try it Yourself »
Example
Create a <p> element with some text and append it to the document's body:
var x = document.createElement("P"); // Create a <p> element
var t = document.createTextNode("This is a paragraph."); // Create a text node
x.appendChild(t); // Append the text to <p>
document.body.appendChild(x); // Append <p> to <body>
Try it Yourself »
Related Pages
HTML reference: HTML <body> tag
JavaScript reference: HTML DOM Body Object
❮ Document Object
