Table of Contents

JavaScript textContent is a DOM property for reading or setting the text inside an element and its descendants. It treats assigned content as plain text, making it a simple and safer choice when displaying user input or updating page copy.

What is textContent?

Every DOM node has a textContent property. For an element, reading it returns the combined text of that element and its descendant nodes. Setting it replaces the element’s existing children with one text node containing the supplied value.

Read text with textContent

Select an element and read its property to get the text within it:

<p id="summary">Learn <strong>JavaScript</strong> DOM methods.</p>

<script>
  const summary = document.querySelector("#summary");
  console.log(summary.textContent);
</script>

The logged value includes the text from the nested <strong> element: “Learn JavaScript DOM methods.” It does not return the HTML tags themselves.

Set text with textContent

Assign a string to replace the element’s current contents with plain text:

<div id="status">Loading...</div>

<script>
  const status = document.querySelector("#status");
  status.textContent = "Ready to continue.";
</script>

The browser displays “Ready to continue.” Any old child nodes inside the element are removed and replaced by the new text. If the assigned string contains angle brackets, the browser displays them as text rather than creating markup.

Use textContent for user-provided values

When displaying a value typed by a user, prefer textContent over inserting the value as HTML:

<input id="name-input" type="text" placeholder="Enter your name">
<button id="greet-button" type="button">Greet me</button>
<p id="greeting"></p>

<script>
  const input = document.querySelector("#name-input");
  const greeting = document.querySelector("#greeting");

  document.querySelector("#greet-button").addEventListener("click", () => {
    greeting.textContent = `Hello, ${input.value}!`;
  });
</script>

If someone enters text that looks like HTML or JavaScript, textContent displays it literally. In contrast, assigning untrusted input to innerHTML asks the browser to parse it as markup and can create a cross-site scripting (XSS) vulnerability.

textContent vs. innerText vs. innerHTML

  • textContent: reads or sets descendant text without interpreting HTML. Reading it includes text in hidden descendants and does not account for styling.
  • innerText: represents rendered, visible text and is affected by CSS and layout. Reading it can require the browser to calculate layout.
  • innerHTML: reads or parses HTML markup. It is useful for trusted, deliberately authored markup, but avoid using it with untrusted strings.

For straightforward text updates, textContent is usually the clearest option. Choose innerText only when you specifically need visible, rendered text.

Common mistakes

  • Expecting HTML to be created: setting textContent to "<em>Hello</em>" displays the angle brackets and tags. Use DOM methods such as createElement() when you need real elements.
  • Accidentally removing child elements: assigning text replaces all children. If you need to preserve markup, update a dedicated child element instead.
  • Using a selector that finds nothing: if querySelector() returns null, reading or setting textContent on it throws an error. Check the selector and make sure the script runs after the element is available.
  • Confusing the property with a function: use element.textContent, not element.textContent().
  • Assuming it only reads direct text: reading an element’s value includes text nested inside its descendants.

Categorized in:

Javascript, Js DOM,