HTML DOM - Modify HTML Content

Through the HTML DOM, JavaScript can access every element in an HTML document.

Change HTML Content

The easiest way to change an element's content is to use the innerHTML property.

The following example changes the HTML content of a <p> element:

Example

<p id="p1">Hello World!</p> <script>document.getElementById("p1").innerHTML="New text!";</script> <p>The paragraph is modified by the script.</p>

Try it Yourself »

Change HTML Style

Through the HTML DOM, you can access the style objects of HTML elements.

The following example changes the HTML style of a paragraph:

Example

<p id="p1">Hello world!</p> <p id="p2">Hello world!</p> <script> document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; </script>

Try it Yourself »

Using Events

The HTML DOM allows you to execute code when an event occurs.

When "something happens" to an HTML element, the browser generates an event:

  • Clicking on an element
  • Loading the page
  • Changing an input field

You can learn more about events in the next chapter.

The following two examples change the background color of the <body> element when a button is clicked:

Example

<input type="button" onclick="document.body.style.backgroundColor='lavender';" value="Change background color">

Try it Yourself »

In this example, the same code is executed by a function:

Example

<script> function ChangeBackground() { document.body.style.backgroundColor="lavender"; } </script> <input type="button" onclick="ChangeBackground()" value="Change background color" />

Try it Yourself »

The following example changes the text of a <p> element when a button is clicked:

Example

<p id="p1">Hello world!</p> <script> function ChangeText() { document.getElementById("p1").innerHTML="Hello Example!"; } </script> <input type="button" onclick="ChangeText()" value="Change text" />

Try it Yourself »
Other Extensions