JavascriptHow-ToBeginner · 3 min read

How to Change Text Content in JavaScript Easily

To change text content in JavaScript, select the HTML element using methods like document.getElementById and then set its textContent or innerText property to the new text. This updates the visible text inside that element on the webpage.

📐

Syntax

Use document.getElementById('elementId') to select an element by its ID. Then assign a new string to its textContent or innerText property to change the text inside it.

element.textContent = 'new text': Changes the text content including hidden text.
element.innerText = 'new text': Changes the visible text, ignoring hidden text.

javascript

const element = document.getElementById('myElement');
element.textContent = 'Hello, world!';

💻

Example

This example shows how to change the text inside a paragraph when a button is clicked.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Change Text Example</title>
</head>
<body>
  <p id="myText">Original text.</p>
  <button id="changeBtn">Change Text</button>

  <script>
    const button = document.getElementById('changeBtn');
    const paragraph = document.getElementById('myText');

    button.addEventListener('click', () => {
      paragraph.textContent = 'Text has been changed!';
    });
  </script>
</body>
</html>

Output

Original text. [Button labeled 'Change Text'] After clicking the button, the paragraph text changes to: Text has been changed!

⚠️

Common Pitfalls

One common mistake is trying to change text on an element that does not exist or is not selected correctly, which causes errors. Another is confusing innerHTML with textContent: innerHTML changes HTML inside the element, while textContent changes only text.

Also, using innerText can be slower and behave differently across browsers compared to textContent.

javascript

/* Wrong: element not found */
const wrongElement = document.getElementById('noSuchId');
wrongElement.textContent = 'Won\'t work'; // Error: cannot set property on null

/* Right: check element exists */
const rightElement = document.getElementById('myText');
if (rightElement) {
  rightElement.textContent = 'Works fine';
}

📊

Quick Reference

Property/Method	Description	Notes
textContent	Sets or gets the text content of an element	Includes hidden text, faster
innerText	Sets or gets the visible text of an element	Ignores hidden text, slower
innerHTML	Sets or gets HTML inside an element	Use to add HTML, not just text
document.getElementById('id')	Selects element by ID	Returns null if not found

✅

Key Takeaways

Use document.getElementById to select the element before changing text.

Set the textContent property to change the text inside an element safely and quickly.

Avoid errors by checking if the element exists before changing its text.

innerText differs from textContent by ignoring hidden text and may be slower.

Use innerHTML only when you want to add or change HTML, not plain text.