HTML | DOM body Property
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:
html
<!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> |
Output:
Before click on Button:
After click on Button:
Example 2:
html
<!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> |
Output:
Supported Browsers: The browser supported by DOM body property are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 4 and above
- Firefox 60 and above
- Opera 9.6 and above
- Safari 1 and above
Please Login to comment...