Web/API/Node/textContent

The textContent property of the Node interface represents the text content of the node and its descendants.

Note: textContent and HTMLElement.innerText are easily confused, but the two properties are different in important ways.

Syntax

let text = someNode.textContent
someOtherNode.textContent = string

Value

A string or null

Description

The value of textContent depends on the situation:

If the node is a document or a Doctype, textContent returns null.

Note: To get all of the text and CDATA data for the whole document, one could use document.documentElement.textContent.
If the node is a CDATA section, comment, processing instruction, or text node, textContent returns the text inside the node, i.e., the Node.nodeValue.
For other node types, textContent returns the concatenation of the textContent of every child node, excluding comments and processing instructions. (This is an empty string if the node has no children.)

Setting textContent on a node removes all of the node's children and replaces them with a single text node with the given string value.

Differences from innerText

Don't get confused by the differences between Node.textContent and HTMLElement.innerText. Although the names seem similar, there are important differences:

textContent gets the content of all elements, including <script> and <style> elements. In contrast, innerText only shows “human-readable” elements.
textContent returns every element in the node. In contrast, innerText is aware of styling and won’t return the text of “hidden” elements.
- Moreover, since innerText takes CSS styles into account, reading the value of innerText triggers a reflow to ensure up-to-date computed styles. (Reflows can be computationally expensive, and thus should be avoided when possible.)
Unlike textContent, altering innerText in Internet Explorer (version 11 and below) removes child nodes from the element and permanently destroys all descendant text nodes. It is impossible to insert the nodes again into any other element or into the same element after doing so.

Differences from innerHTML

Element.innerHTML returns HTML, as its name indicates. Sometimes people use innerHTML to retrieve or write text inside an element, but textContent has better performance because its value is not parsed as HTML.

Moreover, using textContent can prevent XSS attacks.

Examples

Given this HTML fragment:

<div id="divA">This is <span>some</span> text!</div>

... you can use textContent to get the element's text content:

let text = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'

... or set the element's text content:

document.getElementById('divA').textContent = 'This text is different!';
// The HTML for divA is now:
// <div id="divA">This text is different!</div>

Specifications

Specification	Status	Comment
DOMThe definition of 'Node.textContent' in that specification.	Living Standard

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`textContent`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 9	Opera Full support 9	Safari Full support 3	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0

Legend

Full support: Full support