Discover how to easily change the text of any element on your webpage using JavaScript.
This article will guide you through the use of the textContent and innerHTML properties to update text in real-time, with clear examples and explanations.
Experience the impact of JavaScript in making your website more engaging with dynamic text updates in real-time.
Changing text in JavaScript
The HTML Document Object Model (DOM) allows JavaScript to modify or change the content of HTML elements.
JavaScript is a programming language that allows you to add interactivity to your website.
One of the things you can do with JavaScript is change the text on your webpage.
There are two main ways to do this: using the textContent property or the innerHTML property.
The textContent property lets you change the text of an element, without changing any of its HTML structure.
On the other hand, the innerHTML property lets you change not only the text, but also the HTML content of an element.
How to change a text with JavaScript?
To change the text of an element using JavaScript, you can use the textContent or innerHTML properties.
Using textContent property
Here’s an example of how to change the text of an element with the id “ITSC“ using the textContent property:
document.getElementById("id").textContent = "New text!";Here’s the complete code:
<!DOCTYPE html>
<html>
<head>
<title>
How to change the text using JavaScript ?
</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 90vh;
margin: 0;
}
</style>
</head>
<body>
<h1 style="color:blue;">
Itsourcecode
</h1>
<h4>
Click the button to change
the text.
</h4>
<p id = "ITSC"> ✅
Welcome to Itsourcecode
</p>
<br>
<button onclick="itsourcecode()">
Try to click me!
</button>
<script>
function itsourcecode() {
document.getElementById('ITSC').textContent ✅
= 'Itsourcecode.com is designed to help new and experienced programmers expand their knowledge and improve their programming skills';
}
</script>
</body>
</html>
Output:
Using innerHTML property
If you want to change the HTML content of an element, you can use the innerHTML property.
Here’s an example that changes the text of an element with id=”ITSC” using the innerHTML property:
document.getElementById("id").innerHTML = new HTML
Here’s the complete code:
<!DOCTYPE html>
<html>
<head>
<title>
How to change the text using JavaScript?
</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 90vh;
margin: 0;
}
</style>
</head>
<body>
<h1 style="color:blue;">
Welcome to Itsourcecode
</h1>
<h4>
Click the button to change
the text.
</h4>
<p id = "ITSC"> ✅
Welcome to Itsourcecode
</p>
<br>
<button onclick="itsourcecode()">
Try to Click Me!
</button>
<script>
function itsourcecode() {
document.getElementById('ITSC').innerHTML ✅
= 'Itsourcecode.com is designed to help new and experienced programmers expand their knowledge and improve their programming skills';
}
</script>
</body>
</html>
Output:
However, keep in mind that using innerHTML can be a security risk if you’re not careful, as it can introduce cross-site scripting (XSS) vulnerabilities.
So, if you’re only changing text and not adding any HTML elements, it’s generally safer to use textContent.
Conclusion
In conclusion, this article provides a straightforward guide to changing the text of webpage elements using JavaScript.
We have discussed the two primary methods, the textContent and innerHTML properties, both of which allow dynamic text updates.
While textContent is recommended for safer text-only changes, innerHTML enables alterations to HTML content as well.
We are hoping that this article provides you with enough information that helps you understand the JavaScript change text.
If you want to dive into more JavaScript topics, check out the following articles:
Thank you for reading itsourcecoders 😊.
Official documentation
Quick step-by-step summary (click to expand)
- Changing text in JavaScript. Read the ‘Changing text in JavaScript’ section for the details and code.
- How to change a text with JavaScript. Read the ‘How to change a text with JavaScript?’ section for the details and code.
- Conclusion. Read the ‘Conclusion’ section for the details and code.
Frequently Asked Questions
Is JavaScript still worth learning in 2026?
What is the difference between var, let, and const?
Which JavaScript version should I target in 2026?
What is the best free editor for JavaScript?
How do I run JavaScript locally vs in the browser?
What can I build with JavaScript for my BSIT capstone?
Caren Bautista
Technical Writer at PIES IT Solution
Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.
Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel
· View all posts by Caren Bautista →