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:
JAVASCRIPTconst text = document.querySelector(".text");
Now, we can change the text of the element using the textContent
property:
JAVASCRIPTconst 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:
- 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:
HTML<div>
<p class="text">This is the original text.</p>
</div>
JAVASCRIPTconst 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!
- How to Install Node on Windows, macOS and Linux
- Getting Started with Express
- Git Tutorial: Learn how to use Version Control
- How to Set Up Cron Jobs in Linux
- How to deploy a .NET app using Docker
- How to deploy a MySQL Server using Docker
- How to deploy an Express app using Docker
- Getting Started with Sass
- Using Puppeteer and Jest for End-to-End Testing
- Getting User Location using JavaScript's Geolocation API
- Learn how to build a Slack Bot using Node.js
- Getting Started with Vuex: Managing State in Vue