Node.textContent

  • Revision slug: Web/API/Node.textContent
  • Revision title: Node.textContent
  • Revision id: 445021
  • Created:
  • Creator: kscarfone
  • Is current revision? No
  • Comment Editorial review

Revision Content

Summary

Gets or sets the text content of a node and its descendents.

Syntax

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

Description

  • 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 attribute 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 element.innerText. The intention is pretty much the same with a couple of differences:

  • Note that while textContent gets the content of all elements, including {{HTMLElement("script")}} and {{HTMLElement("style")}} elements, the mostly equivalent IE-specific property, innerText, does not.
  • innerText is also 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.

Differences from innerHTML

innerHTML returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use innerHTML. textContent should be used instead. Since the text is not processed it's likely to have better performance. Moreover, this avoids an XSS vector attack.

Example

// 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>

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1+ {{CompatVersionUnknown}} 9 {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

Specification

Revision Source

<h2 id="Summary" name="Summary">Summary</h2>
<p>Gets or sets the text content of a node and its descendents.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
var <em>text</em> = element.textContent;
element.textContent = "this is some sample text";
</pre>
<h2 id="Notes" name="Notes">Description</h2>
<ul>
  <li><code>textContent</code> returns <code>null</code> if the element is a <a href="/en-US/docs/DOM/document" title="DOM/Document">document</a>, a document type, or a notation. To grab all of the text and CDATA data for the whole document, one could use<code> <a href="/en-US/docs/DOM/document.documentElement" title="DOM/document.documentElement">document.documentElement</a>.textContent</code>.</li>
  <li>If the node is a CDATA section, a comment, a processing instruction, or a text node, <code>textContent</code> returns the text inside this node (the <a href="/en-US/docs/DOM/Node.nodeValue" title="DOM/Node/NodeValue/Node.nodeValue">nodeValue</a>).</li>
  <li>For other node types, <code>textContent</code> returns the concatenation of the <code>textContent</code> attribute value of every child node, excluding comments and processing instruction nodes. This is an empty string if the node has no children.</li>
  <li>Setting this property on a node removes all of its children and replaces them with a single text node with the given value.</li>
</ul>
<h3 id="Differences_from_innerText">Differences from <code>innerText</code></h3>
<p>Internet Explorer introduced <code>element.innerText</code>. The intention is pretty much the same with a couple of differences:</p>
<ul>
  <li>Note that while <code>textContent</code> gets the content of all elements, including {{HTMLElement("script")}} and {{HTMLElement("style")}} elements, the mostly equivalent IE-specific property, <code>innerText</code>, does not.</li>
  <li><code>innerText</code> is also aware of style and will not return the text of hidden elements, whereas textContent will.</li>
  <li>As <code>innerText</code> is aware of CSS styling, it will trigger a reflow, whereas <code>textContent</code> will not.</li>
</ul>
<h3 id="Differences_from_innerHTML">Differences from <code>innerHTML</code></h3>
<p><code>innerHTML</code> returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use <code>innerHTML</code>. <code>textContent</code> should be used instead. Since the text is not processed it's likely to have better performance. Moreover, this avoids an <span title="cross-site scripting">XSS</span> vector attack.</p>
<h2 id="Example" name="Example">Example</h2>
<pre class="brush: js">
// Given the following HTML fragment:
//   &lt;div id="divA"&gt;This is &lt;span&gt;some&lt;/span&gt; text&lt;/div&gt;

// 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:
//   &lt;div id="divA"&gt;This is some text&lt;/div&gt;
</pre>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1+</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>9</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Specification" name="Specification">Specification</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent">textContent</a></li>
</ul>
<!-- languages( { "fr": "fr/DOM/element.textContent", "it": "it/DOM/element.textContent", "pl": "pl/DOM/element.textContent" } ) -->
Revert to this revision