Definition and Usage..
The body property sets or returns the document's body.
On return, this property returns the body element of the current document.
On set, this property overwrites all child elements inside the existing body element, and replaces it with the new, specified content.
Tip: The difference between this property and the document.documentElement property, is that the document.body element returns the body element, while the document.documentElement returns the html element.
Syntax: document.body
CODING:The body property sets or returns the document's body.
On return, this property returns the body element of the current document.
On set, this property overwrites all child elements inside the existing body element, and replaces it with the new, specified content.
Tip: The difference between this property and the document.documentElement property, is that the document.body element returns the body element, while the document.documentElement returns the html element.
Syntax: document.body
<!DOCTYPE html>
<html>
<body>
<h3>A demonstration of how to access a BODY element</h3>
<p>Click the button to set the background color of the document to lightgreen.</p>
<button onclick="lightgreen()">lightgreen</button>
<p>Change the HTML content of the current document (will overwrite all existing HTML elements inside <body>)</p>
<button onclick="change()">change</button>
<p>Click the button to display the all HTML content of the document.</p>
<button onclick="display()">display</button>
<p>Click the button to create a P element with some text, and append it to the document's body.</p>
<button onclick="createP()">create it</button>
<p id="demo"></p>
<script>
function lightgreen() {
var x = document.getElementsByTagName("BODY")[0];
x.style.backgroundColor = "lightgreen";
}
function change() {
document.body.innerHTML = "Some new HTML content";
}
function display() {
var x = document.body.innerHTML;
document.getElementById("demo").innerHTML = x;
}
function createP() {
var x = document.createElement("P");
var t = document.createTextNode("This is a paragraph.");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html>
<html>
<body>
<h3>A demonstration of how to access a BODY element</h3>
<p>Click the button to set the background color of the document to lightgreen.</p>
<button onclick="lightgreen()">lightgreen</button>
<p>Change the HTML content of the current document (will overwrite all existing HTML elements inside <body>)</p>
<button onclick="change()">change</button>
<p>Click the button to display the all HTML content of the document.</p>
<button onclick="display()">display</button>
<p>Click the button to create a P element with some text, and append it to the document's body.</p>
<button onclick="createP()">create it</button>
<p id="demo"></p>
<script>
function lightgreen() {
var x = document.getElementsByTagName("BODY")[0];
x.style.backgroundColor = "lightgreen";
}
function change() {
document.body.innerHTML = "Some new HTML content";
}
function display() {
var x = document.body.innerHTML;
document.getElementById("demo").innerHTML = x;
}
function createP() {
var x = document.createElement("P");
var t = document.createTextNode("This is a paragraph.");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html>
Comments
Post a Comment