How to Change the Contents of an HTML Element Using Javascript

Javascript can be used to change the contents of a HTML element, such as a paragraph, a header, a list, or any various HTML element.

For example, look at the paragraph below:

I can't wait for the Google's new driverless vehicles to come out. These vehicles will help society in so many ways. Think about the car driving for you and you not having to do anything. You can read and do your homework on your way to school.

Change Paragraph

You can see how the paragraph changes once the button is clicked. At first we had a paragraph on google's driverless vehicles. And then when clicked, the paragraph changed to content on the Mars Rover.

How do we do this with Javascript? How do we dynamically change the contents of an HTML element such as the paragraph we changed above?

innerHTML Method

HTML Code

We can change the contents of an HTML element such as an <p> tag or a <h> tag or any HTML element by using the innerHTML method.

Let's say we create a regular paragraph in HTML by using the <p> </p>, such as the original paragraph that was shown above before the being changed by the click.

This paragraph has an id element assigned to it called paragraph1. Thus, the full HTML code to produce it is:

<p id="paragraph1">I can't wait for the Google's new driverless vehicles to come out. These vehicles will help society in so many ways. Think about the car driving for you and you not having to do anything. You can read and do your homework on your way to school.</p>

This creates a paragraph with an id of paragraph1. This is the HTML Code.

Javascript Code

Now what Javascript code can go to this <p> tag with an id of para and change the contents to the content with Mars Rover.

To locate this <p> tag and change its contents, we use the following line of code:

<script> document.getElementById("paragraph1").innerHTML="This new paragraph no longer talks about google's driverless vehicles. Let's move on now to the Mars Rover."; </script>

Javascript locates which paragraph you're referencing by the id tag. Since our paragraph has our id of paragraph1, we use the line document.getElementById("paragraph1"). This allows Javascript to locate the paragraph that needs to be changed. The part .innerHTML allows us to change the contents of that paragraph from what it was originally to whatever we assign it to on the righthand side which we place in "" (double quotations) with a ; (semicolon) to end the statement.

How to Change HTML Element Content With a Button Click

If you want to change an HTML element such as a paragraph with a button click, as we have on this page, you would create the paragraph tag, as normal, as we've done before, and then you would create a button tag. On this button tag, you would add the onclick attribute and set it equal to the function which you want to call. This function would call a script that uses the innerHTML method to change the paragraph tag.

So the HTML code would be:

<button onclick="changeparagraph()">Change Paragraph</button>

This button calls the function changeparagraph() when clicked.

The Javascript code would be:

<script> function changeparagraph() { document.getElementById("paragraph1").innerHTML="This new paragraph no longer talks about google's driverless vehicles. Let's move on now to the Mars Rover."; } </script>

So when the button is clicked, the contents of the paragraph changes.

Changing a Header Tag

Let's do the same thing now but with a header tag, just for demonstration.

Here we have a header below:

Tutorial for Changing Contents of an HTML Element

Change header

Same thing as before, only now with the HTML header tags. Again, this can be done with any HTML elements.