innerText vs textContent in JavaScript Explained

innerText and textContent look similar at first glance. Both properties give you the text inside an element, and both let you replace that text with something new.

They differ in one important way: innerText is aware of CSS and only sees rendered text. textContent sees everything regardless of visibility. This difference affects performance, output, and which one you should choose for any given task.

Here is the core difference in one table:

Reading Hidden Text: The Deciding Difference

This is the single most useful test for telling the two properties apart in practice. The clearest way to see the difference is with a hidden element: textContent returns its text, but innerText does not.

html

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

The container has two paragraphs, but one is hidden with CSS. Read both properties to see which one includes the hidden text:

javascript

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

textContent prints both strings concatenated together. innerText prints only the visible paragraph, skipping the hidden one.

textContent returned the hidden paragraph's text along with the visible one. innerText skipped it entirely because the paragraph is not rendered on screen.

This is the fundamental distinction: textContent reads the DOM tree. innerText reads what the user sees.

Performance: Why textContent Is Faster

textContent is faster because it reads text directly from the DOM without consulting the CSS. innerText must ask the browser's layout engine which text is actually rendered, triggering a recalculation of styles and layout.

In a quick comparison on a page with 1,000 elements, reading textContent on each one completes in a few milliseconds. Reading innerText on the same elements can take ten to a hundred times longer because each read forces the browser to check the current CSS state.

This matters most in loops. Reading textContent on every element skips layout entirely:

javascript

const items = document.querySelectorAll(".item");
 
items.forEach((item) => {
  console.log(item.textContent);
});

Swapping in innerText for that same loop changes the cost dramatically, because now the browser must recalculate layout on every single iteration to determine what is actually visible:

javascript

items.forEach((item) => {
  console.log(item.innerText);
});

If you are reading text from many elements at once, always use textContent. The performance difference adds up quickly.

What Gets Included

textContent returns the raw text content of an element and all its descendants. This includes text inside script and style tags, hidden elements, and comments. It preserves the whitespace exactly as it appears in the HTML source.

innerText returns only text that would be visible if you selected and copied it from the rendered page. It excludes script and style content, hidden elements, and text that CSS has pushed off-screen. It also normalizes whitespace to match how the browser renders it.

Setting Text: Both Work, textContent Is Preferred

Both properties treat assigned values as plain text. Neither will parse HTML tags:

javascript

const element = document.querySelector("#output");
 
element.textContent = "<strong>Bold</strong>";
// Displays: <strong>Bold</strong> (literal text)
 
element.innerText = "<strong>Bold</strong>";
// Also displays: <strong>Bold</strong> (literal text)

Since both produce the same result when setting text, prefer textContent for its better performance. There is no advantage to using innerText for writes unless the rendering-aware behavior somehow matters for your specific case.

When to Use Which

Use textContent as your default. It is faster, simpler, and returns everything. It is the right choice when you are reading text from elements, building search indexes, extracting data, or setting display text.

Use innerText when you specifically need to match what the user sees on screen. The main use case is when you want to get the visible, rendered text as if the user had selected and copied it, for example, when implementing a "copy to clipboard" feature that should only capture what is visually displayed.

For the broader topic of changing text on a page, see how to change text content using JavaScript DOM. If you need to insert actual HTML markup rather than plain text, see using innerHTML safely.