Skip to content
Tutorial Reference

How to Get the Text Content of an HTML Element in JavaScript

Learn how to extract text from HTML elements using JavaScript's textContent property, compare it with innerText, and handle whitespace efficiently for reliable DOM manipulation.

A fundamental task in DOM manipulation is to read the text content from an element. You might need to get a user's comment, read a value from a <div>, or extract the text from a complex structure for analysis. The modern and most reliable way to do this is with the textContent property.

This guide will teach you how to use textContent to get an element's text, explain its crucial differences from the older innerText property, and show you why textContent is the recommended best practice for most situations.

The Node.textContent property is the standard, modern way to get the text content of a DOM node and all its descendants. It returns a single string with all the text, ignoring any HTML tags.

For example, you have an element with nested HTML, and you want to extract only the combined text.

HTML:

<div id="container">
  This is the <strong>first</strong> part,
  and this is the <span style="display: none;">hidden</span>
  <em>second</em> part.
</div>

Solution:

const container = document.getElementById('container');

const text = container.textContent;

console.log(text);

Output:

This is the first part, and this is the hidden second part.

The Alternative Method: element.innerText

The HTMLElement.innerText property is an older, non-standard property that also returns the "rendered" text content of an element. However, its behavior is more complex and can be less predictable.

Solution:

const container = document.getElementById('container');

const text = container.innerText;

console.log(text);

Output:

This is the first part, and this is the second part.

textContent vs. innerText: A Critical Comparison

While they seem similar, textContent and innerText have important differences that make textContent the better choice for most use cases.

Feature textContent (Recommended) innerText
Content Gets the content of all nodes, including <script>, <style>, and hidden elements. Only gets "human-readable" content. It is CSS-aware and ignores hidden elements.
Performance Very fast. It's a direct representation of the DOM's text nodes. Slower. It has to trigger a browser reflow to calculate the current layout and styles to determine what is "visible."
Formatting Preserves whitespace and line breaks from the source code. Attempts to approximate the rendered appearance, normalizing whitespace.
Standard A W3C standard, supported consistently across all modern browsers. Originally non-standard, with historical inconsistencies between browsers.

How to Handle Leading and Trailing Whitespace

Both textContent and innerText can return strings with extra whitespace, depending on the formatting of your HTML.

Example of code with problems:

<div id="container">

  Hello, World!

</div>
const container = document.getElementById('container');
console.log(`'${container.textContent}'`); 
// Output: "'\n\n  Hello, World!\n\n'"

The Solution uses .trim(). the String.prototype.trim() method is the standard way to remove any leading or trailing whitespace from a string.

const text = container.textContent.trim();
console.log(`'${text}'`); 
// Output: "'Hello, World!'"

Conclusion

For getting the text content of an element, the choice is clear in modern JavaScript.

  • The element.textContent property is the recommended best practice. It is fast, predictable, and standardized.
  • The element.innerText property should be used only when you specifically need the CSS-aware, "rendered" text and are willing to accept the performance cost of a potential reflow.
  • Always use the .trim() method on the result if you need to remove surrounding whitespace.
Navigation