HTML DOM
DOM HOME DOM Intro DOM Nodes DOM Methods DOM Properties DOM Access DOM Modify DOM Content DOM Elements DOM Events DOM Navigation DOM SummaryDOM Examples
DOM Examples 1 DOM Examples 2DOM Reference
HTML DOM ObjectsHTML DOM - Modifying HTML Content
With the HTML DOM, JavaScript can access every element in an
HTML document
Changing HTML Content
The easiest way to change the content of an element is by using the innerHTML property.
The following example changes the HTML content of a <p> element:
Example
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
Try it yourself »
Changing HTML Style
With the HTML DOM you can access the style object of HTML elements.
The following example changes the HTML style of a paragraph:
Example
<html>
<body>
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Try it yourself »
Using Events
The HTML DOM allows you to execute code when an event occurs.
Events are generated by the browser when "things happen" to HTML elements:
- An element is clicked on
- The page has loaded
- Input fields are changed
You can read more about events in the next chapter.
The following 2 examples changes the background color of the <body> element when a button is clicked:
Example
<html>
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
Try it yourself »
In this example the same code is executed by a function:
Example
<html>
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
Try it yourself »
The following example changes the text of the <p> element when a button is clicked:
Example
<html>
<body>
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>
<input type="button" onclick="ChangeText()" value="Change text">
</body>
</html>
<body>
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>
<input type="button" onclick="ChangeText()" value="Change text">
</body>
</html>
Try it yourself »
W3Schools' Online Certification
The perfect solution for professionals who need to balance work, family, and career building.
More than 10 000 certificates already issued!
The HTML Certificate documents your knowledge of HTML.
The HTML5 Certificate documents your knowledge of advanced HTML5.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The jQuery Certificate documents your knowledge of jQuery.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
