How to change the text of an element in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Modifying element text content is fundamental for creating dynamic, interactive web applications.
As the creator of CoreUI with extensive JavaScript experience since 2000, I’ve implemented text updates in countless UI components.
From my expertise, the most reliable approach is using the textContent property which safely sets plain text without HTML interpretation.
This method prevents XSS vulnerabilities while providing clean, predictable text manipulation.
Use the textContent property to safely change an element’s text content.
const element = document.getElementById('myElement')
element.textContent = 'New text content'
Here document.getElementById('myElement') selects the target element, and element.textContent = 'New text content' replaces all text inside that element. The textContent property treats the value as plain text, automatically escaping any HTML characters. This ensures security by preventing script injection while maintaining the element’s structure and preserving any child elements’ boundaries.
Best Practice Note:
This is the same approach we use in CoreUI components for secure text updates in buttons, labels, and notifications.
Use textContent over innerHTML when working with plain text to prevent security vulnerabilities and ensure consistent behavior.
