How to Change Text Content Using JavaScript DOM

To change text content in JavaScript, select the element and assign a new string to its textContent property. This is the cleanest way to update text inside an HTML element, and the page updates instantly with no reload and no framework required.

javascript

const heading = document.querySelector("h1");
heading.textContent = "Welcome Back!";

The main heading on the page now reads "Welcome Back!" instead of whatever it said before. No page reload, no framework, just one property assignment. Now here is how to both read and write using the same property.

Reading and Writing textContent

The textContent property works in both directions. Read it to get the text inside an element. Write to it to replace that text with something new.

javascript

const paragraph = document.querySelector("p");
console.log(paragraph.textContent);

This reads whatever text is currently inside the first paragraph element on the page. To replace that text with a completely new value, assign a different string to the same property:

javascript

paragraph.textContent = "This is the new text.";

The element's content updates immediately. When you set textContent, it replaces everything inside the element, including any HTML tags or child elements.

The value you pass is treated as plain text, so even if the string contains characters that look like HTML, they appear as literal characters on screen rather than being parsed as markup.

Practical Examples

Here are three common patterns for using textContent. The first updates a status message after a user action.

javascript

const status = document.querySelector("#status-message");
status.textContent = "Your changes have been saved.";

The status element now displays the saved message in place of whatever text it held before. The second pattern displays a running counter value:

javascript

const counterDisplay = document.querySelector("#counter");
let count = 0;
count += 1;
counterDisplay.textContent = count;

Assigning a number to textContent works because JavaScript converts it to a string automatically, so the counter element shows "1" after this runs. The third pattern clears an element entirely by assigning an empty string:

javascript

const results = document.querySelector("#search-results");
results.textContent = "";

This removes any existing text or child elements from the results container, leaving it empty and ready for new content.

textContent vs innerText

The innerText property also reads and writes text, but with an important difference: it respects CSS. If an element is hidden with display: none, innerText does not include its text, while textContent includes everything, visible or not.

Here is a page with one visible paragraph and one hidden paragraph:

html

<div id="container">
  <p>Visible text</p>
  <p style="display: none;">Hidden text</p>
</div>

Reading both properties on the same container shows the practical effect of that difference. Select the container element first, then log both properties one after another to compare what each one returns:

javascript

const container = document.querySelector("#container");
console.log(container.textContent);
console.log(container.innerText);

textContent prints both strings together, including the hidden paragraph's text. innerText prints only the visible one, skipping the hidden paragraph entirely because the browser has to check its rendered state first.

textContent is also faster because the browser does not need to calculate CSS layout to return the value. For a deeper comparison, see innerText vs textContent explained.

Why textContent Is Safer Than innerHTML

When you need to display user input, textContent is the safe choice. It treats everything as text, so even if a user types HTML tags, they appear as literal characters on screen rather than being parsed as markup:

javascript

const userComment = "<img src=x onerror=\"alert('bad')\">";
const commentBox = document.querySelector("#comment");
 
commentBox.textContent = userComment;
// Displays: <img src=x onerror="alert('bad')"> as plain text, nothing runs

If you had assigned that same string to innerHTML instead, the browser would parse it as a real img element. The broken src attribute would fail to load, triggering the onerror handler and running the attacker's script immediately, without any script tag involved at all.

This is why textContent should be your default for inserting any text you did not write yourself, such as comments, usernames, or search queries.

Where to Go Next

Now that you can change text, learn how to change CSS styles to control appearance. If you need to insert actual HTML markup, see using innerHTML safely for the precautions you must take.