HTML | DOM body Property

The HTML DOM 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:

  • document.body

    This syntax returns the body property.

  • document.body = Content

    This syntax is used to set the body property.

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

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>DOM body property</title>
        <style>
            body {
                text-align:center;
            }
            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() {
                var x = document.body.innerHTML;
                document.getElementById("gfg").innerHTML = 
                "Display the body content:<br>" + x;
            }
        </script>
    </body>
</html>                    

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>DOM body property</title>
        <style>
            h1 {
                color:green;
            }
            body {
                text-align:center;
            }
        </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>        

chevron_right


Output:

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

  • Apple Safari
  • Google Chrome
  • Firefox
  • Opera
  • Internet Explorer


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.