Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to work with document.body in JavaScript?
In this tutorial, we will learn how to work with document.body in JavaScript.
The document.body property provides access to the HTML <body> element, which contains all visible content of a web page including headings, paragraphs, images, hyperlinks, tables, and lists. In an HTML document, there can only be one <body> element.
In this tutorial, we will work with the document.body in JavaScript for:
- Change the background color of the body
- Add a new element at the end of the body
Change the Background Color Using document.body
The document.body contains all properties and methods of the body element. The backgroundColor property in the style object allows us to modify the entire document's background color.
Syntax
document.body.style.backgroundColor = color
In the above syntax, we use the backgroundColor property of document.body to change the background color. The 'color' can be a color name, hex code, or RGB value.
Example
In the below example, we use a button to change the background color of the body. The changeBg() function executes when the user clicks the button.
<html>
<body>
<h2>Change the background color of the body using the <i>document.body</i> in JavaScript</h2>
<button onclick="changeBg()">Change background-color</button>
<p>Click on the above button to change the background color of the body!</p>
<script>
// 'Change background-color' click event handler function
function changeBg() {
// using the document.body
document.body.style.backgroundColor = 'rgb(226, 255, 196)'
}
</script>
</body>
</html>
Add a New Element at the End of the Body
To add a new element at the end of the body, we first create an element using document.createElement(), add content to it, then use the appendChild() method of document.body to insert it.
Syntax
// creating new element const newElement = document.createElement(type) newElement.innerHTML = 'It is a new element' // adding a new element at the end of the body document.body.appendChild(newElement)
In the above syntax, document.createElement() creates an element of the specified type, and appendChild() adds it to the end of the body.
Example
In this example, we create and add a new paragraph element to the body when the user clicks the button.
<html>
<body>
<h2>Add a new element at the end of the body using the <i>document.body</i> in JavaScript</h2>
<button onclick="addNewElement()">Add new element</button>
<p>Click on the above button to add a new element at the end of the body!</p>
<script>
// 'Add new element' click event handler function
function addNewElement() {
// creating new element
const newElement = document.createElement('p')
newElement.innerHTML = 'It is a new element'
// adding a new element at the end of the body
document.body.appendChild(newElement)
}
</script>
</body>
</html>
Common Use Cases
The document.body property is commonly used for:
- Changing page-wide styles like background color or font
- Adding elements dynamically to the page
- Accessing body dimensions and scroll properties
- Setting event listeners on the entire body
Conclusion
document.body is a powerful property for manipulating the entire body element of an HTML document. Use it to change styles, add elements dynamically, or access body-level properties in your JavaScript applications.
10K+ Views
