JavaScriptDomBeginner

textContent vs innerText

Updates element text; textContent is faster and more predictable.

Review the syntaxStudy the examplesOpen the coding app
el.textContent = 'Text';
el.innerText = 'Text';
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Updates element text; textContent is faster and more predictable.

textContent and innerText are used to manipulate element text, but they differ in performance and behavior. textContent is a property of the Node interface; it retrieves the raw text of all nodes, including script and style elements, exactly as they appear in the source code. It is highly performant because it does not trigger a layout reflow. In contrast, innerText is a property of HTMLElement that is layout-aware. It approximates the text as it is rendered to the user, meaning it respects CSS styling like display: none (hiding hidden text) and visibility: hidden. Because innerText must calculate CSS styles to determine visibility and formatting, it triggers a reflow, which can lead to performance bottlenecks if accessed frequently in loops. For most programmatic updates where rendered visibility is not a factor, textContent is the preferred choice for speed and reliability.

Quick reference

Syntax

el.textContent = 'Text';
el.innerText = 'Text';

See it in practice

Examples

1

Visibility and Layout Awareness

const div = document.createElement('div');
div.innerHTML = 'Hello <span style="display:none">Hidden World</span>';

console.log('textContent:', div.textContent);
console.log('innerText:', div.innerText);
Output:
textContent: Hello Hidden World innerText: Hello

textContent retrieves all text nodes regardless of CSS, while innerText ignores elements that are not being rendered.

2

Handling Script and Style Tags

const container = document.createElement('div');
container.innerHTML = '<style>p { color: red; }</style><p>Visible Text</p>';

console.log('textContent:', container.textContent);
console.log('innerText:', container.innerText);
Output:
textContent: p { color: red; }Visible Text innerText: Visible Text

textContent returns the contents of <style> and <script> tags, which can be unexpected. innerText excludes them because they are not 'rendered' text content.

3

Whitespace and Formatting

const box = document.createElement('div');
box.innerHTML = '  Line One  <br>  Line Two  ';

console.log('textContent:', JSON.stringify(box.textContent));
console.log('innerText:', JSON.stringify(box.innerText));
Output:
textContent: " Line One Line Two " innerText: "Line One\nLine Two"

textContent preserves all whitespace as it exists in the DOM. innerText normalizes whitespace and converts <br> tags into line breaks to match the visual representation.

Debug faster

Common Errors

1

PerformanceError

Cause: Using innerText inside a loop or during high-frequency events (like scroll).

Fix: Use textContent instead, as it does not trigger a style recalculation or layout reflow.

for (let i = 0; i < 1000; i++) {
  // Bad: Triggers 1000 reflows
  console.log(element.innerText);
}
2

LogicError

Cause: Expecting textContent to return only what the user sees on the screen.

Fix: Use innerText if you need to filter out text hidden by CSS (display: none).

if (element.textContent === 'Login') { 
  // This might be true even if the element is hidden via CSS
}

Runtime support

Compatibility

BrowserAll modern browsersModern DOM

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Updates element text; textContent is faster and more predictable.

PerformanceError: Use textContent instead, as it does not trigger a style recalculation or layout reflow. LogicError: Use innerText if you need to filter out text hidden by CSS (display: none).