We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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


var text = element.textContent;
element.textContent = "this is some sample text";


  • textContent returns null if the element is a document, a document type, or a notation. To grab all of the text and CDATA data for the whole document, one could use document.documentElement.textContent.
  • If the node is a CDATA section, a comment, a processing instruction, or a text node, textContent returns the text inside this node (the nodeValue).
  • For other node types, textContent returns the concatenation of the textContent property value of every child node, excluding comments and processing instruction nodes. This is an empty string if the node has no children.
  • Setting this property on a node removes all of its children and replaces them with a single text node with the given value.

Differences from innerText

Internet Explorer introduced node.innerText. The intention is similar but with the following differences:

  • While textContent gets the content of all elements, including <script> and <style> elements, innerText does not.
  • innerText is aware of style and will not return the text of hidden elements, whereas textContent will.
  • As innerText is aware of CSS styling, it will trigger a reflow, whereas textContent will not.
  • Unlike textContent, altering innerText in Internet Explorer (up to version 11 inclusive) not only removes child nodes from the element, but also permanently destroys all descendant text nodes (so it is impossible to insert the nodes again into any other element or into the same element anymore).

Differences from innerHTML

Element.innerHTML returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use innerHTML. However, textContent often has better performance because the text is not parsed as HTML. Moreover, using textContent can prevent XSS attacks.


// Given the following HTML fragment:
//   <div id="divA">This is <span>some</span> text</div>

// Get the text content:
var text = document.getElementById("divA").textContent;
// |text| is set to "This is some text".

// Set the text content:
document.getElementById("divA").textContent = "This is some text";
// The HTML for divA is now:
//   <div id="divA">This is some text</div>

Polyfill for IE8

// Source: Eli Grey @ http://eligrey.com/blog/post/textcontent-in-ie8
if (Object.defineProperty 
  && Object.getOwnPropertyDescriptor 
  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent") 
  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
  (function() {
    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
    Object.defineProperty(Element.prototype, "textContent",
     // Passing innerText or innerText.get directly does not work,
     // wrapper function is required.
       get: function() {
         return innerText.get.call(this);
       set: function(s) {
         return innerText.set.call(this, s);

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support11229 Yes3
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes ? Yes ? Yes


Specification Status Comment
The definition of 'Node.textContent' in that specification.
Living Standard No change vs. DOM4
The definition of 'Node.textContent' in that specification.
Document Object Model (DOM) Level 3 Core Specification
The definition of 'Node.textContent' in that specification.
Obsolete Introduced

See also