HTML DOM - Changing HTML
Changing HTML Content
The HTML DOM allows JavaScript to change both the text and the content of HTML elements.
The easiest way to modify the content is by using the innerHTML property:
document.getElementById(id).innerHTML = new HTML
The innerHTML Property
The easiest way to get the content of an element is by using the innerHTML property.
The innerHTML property is useful for getting or replacing the content of HTML elements.
The innerHTML property can be used to get or change any HTML element,
including <html> and <body>.
Common Mistakes
- Trying to access a DOM element before it exists
- Forgetting the quotes in an id like "demo"
Example
Change the content of a <p> element:
<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!"
Example
Change the content of an <h1> element:
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const 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 an Attribute
To change the value of an HTML attribute, use this syntax:
document.getElementById(id).attribute = new value
Example
Changes the value of the src attribute of an <img> element:
<!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"
Dynamic HTML content
JavaScript can create dynamic HTML content:
Example
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
document.write()
In JavaScript, document.write() can be used to write directly to the HTML
output stream:
Example
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
Warning !
Never use document.write() after the document is loaded. It will
overwrite the document.