How to work with document.body in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to work with document.body in JavaScript.

Use the document.body property in JavaScript to get the body of the document, i.e., <body> tag. The <body> tag defines the body of the document. The entire content of an HTML document, including all headings, paragraphs, images, hyperlinks, tables, lists, and other elements, is contained in the <body> element.

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 of the body using the document.body

In JavaScript, the document.body contains all of the properties and methods of the body tag. For example, the backgroundColor property specifies the body tag’s background color, which means the whole document’s body color can be modified using this property. The backgroundColor property is available in the style object of the document.body, so we can easily use it in the JavaScript code.

Syntax

document.body.style.backgroundColor = color

In the above syntax, we use the backgroundColor property of document.body to change the background color of the body. The ‘color’ is the color name or the color code.

Example

In the below example, we work with document.body in JavaScript to change the background color of the body. We use a button ‘Change background-color’ associated with a click event. A click handler function executes whenever the user clicks on the button; in this case, it is the ‘changeBg()’ function. This function uses the document.body and backgroundColor property to change the background color of the body.


<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 funtion
      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 using the document.body

In JavaScript, we must first create an element using the document to add a new element at the end of the body.createElement() method. Secondly, we need to put some content in the new element, then use the appendChild() method of the document.body, we can add this new element at the end of the body tag.

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, we use the document.createElement() method to create an element, the ‘type’ is the element type user wants to create. The appendChild() method of document.body is used to add a new element at the end of the body.

Example

In the below example, we work with document.body in JavaScript to add a new element at the end of the body. A button ‘Add new element’ is used with a click event that executes a click handler function whenever the user clicks on the button. This function uses the document.body and document.createElement() method to create a new element of type ‘p’ and add it at the end of the body.


<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 funtion
      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>

This tutorial taught us how to work with document.body in JavaScript. We have discussed two uses of the document.body. In the first example, we change the background color of the body using the document.body, and in the second example, we add a new element at the end of the body. It is recommended to go through and practice the examples to understand the work of the document.body better