Loading lesson path
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 easiest way to get the content of an element is by using the innerHTML property.
property is useful for getting or replacing the content of HTML elements.
property can be used to get or change any HTML element, including <html> and <body>.
Trying to access a DOM element before it exists Forgetting the quotes in an id like "demo"
<p> element: <html> <body> <p id="p1">Hello World!</p> <script>
document.getElementById("p1").innerHTML = "New text!";</script> </body> </html>
<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> element: <!DOCTYPE html> <html> <body> <h1 id="id01">Old Heading</h1> <script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";</script> </body> </html>
<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"
To change the value of an HTML attribute, use this syntax: document.getElementById( id ).
Formula
attribute = new valueChanges 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>
<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"
JavaScript can create dynamic HTML content:
<!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:
<!DOCTYPE html> <html> <body>
Formula
< p > Bla bla bla </p ><script>
document.write(Date());</script>
Formula
< p > Bla bla bla </p ></body> </html> Warning ! Never use document.write() after the document is loaded. It will overwrite the document.