THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML DOM body Property

❮ Document Object

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