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:
<div>
<p class="text">This is the original text.</p>
</div>
First, let's query for the element we want to change:
const text = document.querySelector(".text");
Now, we can change the text of the element using the textContent
property:
const text = document.querySelector(".text");
text.textContent = "This is the new text.";
The HTML now looks like this:
<div>
<p class="text">This is the new text.</p>
</div>
Let's see an interactive example of this in action:
- HTML
- JavaScript
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:
<div>
<p class="text">This is the original text.</p>
</div>
const text = document.querySelector(".text");
text.innerHTML = "This is the <strong>new</strong> text.";
Try it for yourself:
- HTML
- JavaScript
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!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!
Leave us a message!