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

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 Core Method (Recommended): element.textContent

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.

note

Notice that textContent correctly retrieves the text from all child nodes, including the <strong>, <span>, and <em> tags, and even from the hidden <span>.

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.

note

Notice that innerText did not include the word "hidden," because the <span> containing it has display: none.

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.

note

Best Practice: Use textContent by default. It is faster, more predictable, and returns the complete text content of the DOM node. Use innerText only if you have a specific need to get only the text that is visually rendered to the user.

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.