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
src
attribute of that element from “smiley.gif” to “landscape.jpg”