Open In App
Related Articles

HTML DOM body Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The HTML DOM Body property is used to set the document <body> element. It only returns the content present in the <body> Tag. This property is used to change the present content inside the <body> element and sets them with the new specified content. This property does not return the <HTML> element.

Syntax: 

  • This syntax returns the body property.  
document.body

  • This syntax is used to set the body property. 
document.body = Content

Return Value: A reference to the Body Object, which represents a <body> element

Property Value: The document.body property uses single value Content which is used to add new content in the body element.

Example 1: In this example, we will use document.body property

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>DOM body property</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM body property</h2>
    <button onclick="geeks()">Submit</button>
    <p id="gfg"></p>
    <script>
        function geeks() {
            let x = document.body.innerHTML;
            document.getElementById("gfg").innerHTML =
                "Display the body content:<br>" + x;
        }
    </script>
</body>
   
</html>

                    

Output: 

Example 2: In this example, we will use document.body property

HTML

<!DOCTYPE html>
<html>
<head>
    <title>DOM body property</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM body property</h2>
    <button onclick="geeks()">Submit</button>
    <script>
        function geeks() {
            document.body.innerHTML = "<h1>"
                + "GeeksforGeeks"
                + "</h1>" + "<br>" + "<h2>"
                + "New Content Added"
                + "</h2>";
        }
    </script>
</body>
</html>

                    

Output: 

HTML DOM body Property

HTML DOM body Property

Supported Browsers: The browser supported by DOM body property are listed below: 

  • Google Chrome 1 and above
  • Edge 12 and above
  • Firefox 60 and above
  • Opera 9.6 and above
  • Safari 1 and above


Last Updated : 04 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads