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!
- Getting Started with TypeScript
- How to Serve Static Files with Nginx and Docker
- Best Visual Studio Code Extensions for 2022
- How to deploy a Deno app using Docker
- How to deploy a MySQL Server using Docker
- How to deploy an Express app using Docker
- Getting Started with Sass
- Getting Started with Handlebars.js
- Using Push.js to Display Web Browser Notifications
- Setting Up Stylus CSS Preprocessor
- Setting Up a Local Web Server using Node.js
- Getting Started with Moon.js