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.
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.
A string, or null
. Its value depends on the situation:
document
or a doctype, textContent
returns null
. Note: To get all of the text and CDATA data for the whole document, use document.documentElement.textContent
.
textContent
returns, or sets, the text inside the node, i.e., the Node.nodeValue
. 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.) Warning: 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.
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. 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.) 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.
Start with this HTML fragment.
html
<div id="divA">This is <span>some</span> text!</div>
You can use textContent
to get the element's text content:
js
let text = document.getElementById("divA").textContent; // The text variable is now: 'This is some text!'
If you prefer to set the element's text content, you can do:
js
document.getElementById("divA").textContent = "This text is different!"; // The HTML for divA is now: // <div id="divA">This text is different!</div>
Specification |
---|
DOM Standard # dom-node-textcontent |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
textContent |
1 | 12 | 1 | 9 | 9 | 3 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent