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>
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
Warning !
Never use document.write() after the document is loaded. It will
overwrite the document.
