The HTML DOM allows JavaScript to change the content of HTML elements.
Changing the HTML Output Stream #
JavaScript can create dynamic HTML content:
Date: Wed May 19 2021 15:32:50 GMT+0800 (Ulaanbaatar Standard Time)
In JavaScript, document.write() can be used to write directly to the HTML output stream:
Example #
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html> Never use
document.write()after the document is loaded. It will overwrite the document.
Changing HTML Content #
The easiest way to modify the content of an HTML element is by using the innerHTML property.
To change the content of an HTML element, use this syntax:
document.getElementById(id).innerHTML = new HTML
This example changes the content of a <p> element:
Example #
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html> Example explained:
- The HTML document above contains a
<p>element withid="p1" - We use the HTML DOM to get the element with
id="p1" - A JavaScript changes the content (
innerHTML) of that element to “New text!”
This example changes the content of an <h1> element:
Example #
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
var element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html> Example explained:
- The HTML document above contains an
<h1>element withid="id01" - We use the HTML DOM to get the element with
id="id01" - A JavaScript changes the content (
innerHTML) of that element to “New Heading”
Changing the Value of an Attribute #
To change the value of an HTML attribute, use this syntax:
document.getElementById(id).attribute = new value
This example changes the value of the src attribute of an <img> element:
Example #
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html> Example explained:
- The HTML document above contains an
<img>element withid="myImage" - We use the HTML DOM to get the element with
id="myImage" - A JavaScript changes the
srcattribute of that element from “smiley.gif” to “landscape.jpg”
