Flash cards
Review the key moves
What is the main idea behind HTML DOM - Changing HTML?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___.getElementById( id ).Put the learning moves in the order that makes the concept easiest to apply.
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 HTMLThe 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"
<p>Example explained
- The HTML document above contains a <p> element with id="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!"
<h1>Example explained
- The HTML document above contains an <h1> element with id="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 valuesrcExample explained
- The HTML document above contains an <img> element with id="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"
Dynamic HTML content
Example
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>Live preview
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>Live preview
Warning !
Never use document.write() after the document is loaded. It will overwrite the document.