innerText vs textContent and various markup

JavaScript performance comparison

Test case created by kangax

Preparation code

<div id="test" contenteditable>
<p> He<strong>llo!</strong>

</p><p>Hello <span>to you </span>too.

</p><p style="display:none">Secret

</p><div> </div>

<hr>

<p style="visibility:hidden">visibility:hidden <span style="visibility:visible">visibility:visible</span>

</p><div><div><div> Triple nested div </div></div></div>

<div style="margin:1em">Margined div</div>

<table>
  <tbody><tr><th>Stuff</th><th>More stuff </th><th>Even more stuff
  </th></tr><tr><td> Data  </td><td>More data </td><td>..
  </td></tr><tr><td>? </td><td> </td><td>Last cell was empty!
  </td></tr><tr><td></td><td></td><td>Last two cells empty
</td></tr></tbody></table>

<pre> Preformatted </pre>

<pre>Also
pre
   formatted
</pre>

<div style="white-space:pre"> white-space
  pre</div>
<div style="white-space:pre-line"> Pre-
  line
</div>
<div style="white-space:nowrap"> No
  wrap
</div>
<div style="white-space:pre-wrap"> Pre-
  wrap
</div>
<div style="float:left"> Float left </div>
<div> Normal div </div>
<div style="float:right"> Float right </div>
<div> Normal div </div>

<div style="float:left"> Float left </div>
<div style="clear:left"> Left-cleared div </div>

An <table style="display:inline"> <tbody><tr><td>Inline </td><td>Table</td></tr></tbody></table>.  Line
break:

<br>

Two line breaks:<br><br>

Three line breaks:<br><br><br>

An <table style="display:inline"><tbody><tr><td>Inline </td><td>table</td></tr><tr><td>with
</td><td>multiple rows</td></tr></tbody></table>.

<p style="content: ' You should see this generated content \A'">You should not
see this un-generated content

</p><p class="before">Is there text before this?

</p><p class="after">Is there text after this?

</p><div style="width: 50px; overflow: hidden; text-overflow: ellipsis">text-overflow: ellipsis</div>

<p style="text-transform:uppercase">Transformed to uppercase

</p><p style="text-transform:lowercase">Transformed to lowercase

</p><p style="text-transform:capitalize">Transformed to titlecase

</p><ul>
<li> Unordered
</li><li> List
</li></ul>

<ol>
<li> Ordered
</li><li> List
</li></ol>

<div> this line has 1 leading and 1 trailing spaces </div>
<p>
  And here's    4 spaces
</p>

<p>
  And a triple   nbsp's
</p>

<p><i>some</i> <del>more</del> <b>formatting</b></p>

<table border="1">
<caption>Table caption</caption>
<tbody><tr><td>Regular </td><td>old
</td></tr><tr><td>data </td><td>table
</td></tr></tbody></table>

<table border="1">
<caption>Table caption</caption>
<tbody><tr><td><p>Table cell </p><p>with </p><p>paragraphs </p></td><td>Cell 2
</td></tr><tr><td>Next </td><td>row
</td></tr></tbody></table>

<div style="position:relative;height:200px;width:200px">
  <div style="position:absolute;right:0;top:0;height:100px;width:100px">
    <p>Top right (absolute position)
  </p></div>
  <div style="position:absolute;left:0;bottom:0;height:100px;width:100px">
    <p>Bottom left (absolute position)
  </p></div>
</div>

<select>
  <option>select option 1
  select option 2
</option></select>

<!-- <p>This should not show (comment).</p>-->

<unknown>&lt;unknown> tags</unknown>

<p>
  This is text before<span style="display:block">a span
              with display:block.</span>...and after.
</p>

<div style="display: inline">div w. display:inline</div>
<div style="display: inline">div w. display:inline</div>

<div style="display: table">
  <div style="display: table-cell">div w. table-cell</div>
  <div style="display: table-cell">div w. table-cell</div>
</div>

<img src="foo.png" alt="img alt value">

<canvas width="10" height="10">fallback canvas content</canvas>

<br>

Text without any tags

<br>

<span>top level span</span>

<em>top level em</em>

</div>
    

Preparation code output

<div id="test" contenteditable> <p> He<strong>llo!</strong> </p><p>Hello <span>to you </span>too. </p><p style="display:none">Secret </p><div> </div> <hr> <p style="visibility:hidden">visibility:hidden <span style="visibility:visible">visibility:visible</span> </p><div><div><div> Triple nested div </div></div></div> <div style="margin:1em">Margined div</div> <table> <tbody><tr><th>Stuff</th><th>More stuff </th><th>Even more stuff </th></tr><tr><td> Data </td><td>More data </td><td>.. </td></tr><tr><td>? </td><td> </td><td>Last cell was empty! </td></tr><tr><td></td><td></td><td>Last two cells empty </td></tr></tbody></table> <pre> Preformatted </pre> <pre>Also pre formatted </pre> <div style="white-space:pre"> white-space pre</div> <div style="white-space:pre-line"> Pre- line </div> <div style="white-space:nowrap"> No wrap </div> <div style="white-space:pre-wrap"> Pre- wrap </div> <div style="float:left"> Float left </div> <div> Normal div </div> <div style="float:right"> Float right </div> <div> Normal div </div> <div style="float:left"> Float left </div> <div style="clear:left"> Left-cleared div </div> An <table style="display:inline"> <tbody><tr><td>Inline </td><td>Table</td></tr></tbody></table>. Line break: <br> Two line breaks:<br><br> Three line breaks:<br><br><br> An <table style="display:inline"><tbody><tr><td>Inline </td><td>table</td></tr><tr><td>with </td><td>multiple rows</td></tr></tbody></table>. <p style="content: ' You should see this generated content \A'">You should not see this un-generated content </p><p class="before">Is there text before this? </p><p class="after">Is there text after this? </p><div style="width: 50px; overflow: hidden; text-overflow: ellipsis">text-overflow: ellipsis</div> <p style="text-transform:uppercase">Transformed to uppercase </p><p style="text-transform:lowercase">Transformed to lowercase </p><p style="text-transform:capitalize">Transformed to titlecase </p><ul> <li> Unordered </li><li> List </li></ul> <ol> <li> Ordered </li><li> List </li></ol> <div> this line has 1 leading and 1 trailing spaces </div> <p> And here's 4 spaces </p> <p> And a triple nbsp's </p> <p><i>some</i> <del>more</del> <b>formatting</b></p> <table border="1"> <caption>Table caption</caption> <tbody><tr><td>Regular </td><td>old </td></tr><tr><td>data </td><td>table </td></tr></tbody></table> <table border="1"> <caption>Table caption</caption> <tbody><tr><td><p>Table cell </p><p>with </p><p>paragraphs </p></td><td>Cell 2 </td></tr><tr><td>Next </td><td>row </td></tr></tbody></table> <div style="position:relative;height:200px;width:200px"> <div style="position:absolute;right:0;top:0;height:100px;width:100px"> <p>Top right (absolute position) </p></div> <div style="position:absolute;left:0;bottom:0;height:100px;width:100px"> <p>Bottom left (absolute position) </p></div> </div> <select> <option>select option 1 select option 2 </option></select> <!-- <p>This should not show (comment).</p>--> <unknown>&lt;unknown> tags</unknown> <p> This is text before<span style="display:block">a span with display:block.</span>...and after. </p> <div style="display: inline">div w. display:inline</div> <div style="display: inline">div w. display:inline</div> <div style="display: table"> <div style="display: table-cell">div w. table-cell</div> <div style="display: table-cell">div w. table-cell</div> </div> <img src="foo.png" alt="img alt value"> <canvas width="10" height="10">fallback canvas content</canvas> <br> Text without any tags <br> <span>top level span</span> <em>top level em</em> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
innerText
document.getElementById('test').innerText;
pending…
textContent
document.getElementById('test').textContent;
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 Comments

Hello!

Hello to you too.

Secret


visibility:hidden visibility:visible

Triple nested div
Margined div
StuffMore stuff Even more stuff
Data More data ..
? Last cell was empty!
Last two cells empty
 Preformatted 
Also
  pre
     formatted
  
white-space pre
Pre- line
No wrap
Pre- wrap
Float left
Normal div
Float right
Normal div
Float left
Left-cleared div
An
Inline Table
. Line break:
Two line breaks:

Three line breaks:


An
Inline table
with multiple rows
.

You should not see this un-generated content

Is there text before this?

Is there text after this?

text-overflow: ellipsis

Transformed to uppercase

Transformed to lowercase

Transformed to titlecase

  1. Ordered
  2. List
this line has 1 leading and 1 trailing spaces

And here's 4 spaces

And a triple nbsp's

some more formatting

Table caption
Regular old
data table
Table caption

Table cell

with

paragraphs

Cell 2
Next row

Top right (absolute position)

Bottom left (absolute position)

<unknown> tags

This is text beforea span with display:block....and after.

div w. display:inline
div w. display:inline
div w. table-cell
div w. table-cell
img alt value fallback canvas content
Text without any tags
top level span top level em