nodeTextContents

Prefer textContent over innerText for DOM nodes.

✅ This rule is included in the browser logical preset.

The textContent property should be preferred over innerText when accessing or setting the text content of DOM nodes. textContent is more performant because it doesn’t trigger a reflow, is more widely supported and standard across browsers, and has more predictable behavior.

innerText is aware of styling and won’t return text of hidden elements, which can lead to unexpected behavior in some cases. Additionally, innerText is slower because it requires layout information.

Examples

❌ Incorrect

const text = element.innerText;

element.innerText = "Hello";

const content = node.innerText;

div.innerText = value;

✅ Correct

const text = element.textContent;

element.textContent = "Hello";

const content = node.textContent;

div.textContent = value;

Options

This rule is not configurable.

When Not To Use It

If you specifically need the behavior of innerText (filtering out hidden elements or getting rendered text), then you should disable this rule for those specific cases.

Further Reading

• MDN: Node.textContent
• MDN: HTMLElement.innerText
• Performance comparison: textContent vs innerText

Equivalents in Other Linters

• ESLint: unicorn/prefer-dom-node-text-content
• Oxlint: unicorn/prefer-dom-node-text-content