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 = ContentReturn 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
<!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
<!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:
Supported Browsers: The browser supported by DOM body property are listed below: