How to Change Text on HTML Pages using JavaScript

JavaScript makes it really easy to customize the front-end experience for users thanks to its built-in APIs.

One of the most common tasks is to change the text or HTML of a page.

This allows you to do things like change the text of something after a button press.

In this post, we'll learn how to change the text of a page using JavaScript.

How to Change the Text of a Page

The most straightforward way to change the text of a page is to use the textContent property of an element.

Let's see how this works using the following HTML:

HTML
<div>
    <p class="text">This is the original text.</p>
</div>

First, let's query for the element we want to change:

JAVASCRIPT
const text = document.querySelector(".text");

Now, we can change the text of the element using the textContent property:

JAVASCRIPT
const text = document.querySelector(".text");

text.textContent = "This is the new text.";

The HTML now looks like this:

HTML
<div>
    <p class="text">This is the new text.</p>
</div>

Let's see an interactive example of this in action:

How to Change the HTML of a Page

Keep in mind that the textContent property only changes the text of an element.

If you want to use tags and change the HTML of an element, you can use the innerHTML property.

Here's an example of this:

HTML
<div>
    <p class="text">This is the original text.</p>
</div>

JAVASCRIPT
const text = document.querySelector(".text");

text.innerHTML = "This is the <strong>new</strong> text.";

Try it for yourself:

Conclusion

In this post, we learned how to change the text and HTML of a page using JavaScript.

Simply use the textContent property to change the text of an element.

To change the HTML of an element, you can instead use the innerHTML property.

Thanks for reading!

• Support Us
• Discord
• Share
• Post
• Share