StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><b>Update</b>: I wrote a <a href="http://perfectionkills.com/the-poor-misunderstood-innerText/" rel="noreferrer">blog post detailing all the differences</a> much better.</p> <hr> <p>Firefox uses W3C standard <code>Node::textContent</code>, but its behavior differs "slightly" from that of MSHTML's proprietary <code>innerText</code> (copied by Opera as well, some time ago, among dozens of other MSHTML features).</p> <p>First of all, <code>textContent</code> whitespace representation is different from <code>innerText</code> one. Second, and more importantly, <code>textContent</code> <strong>includes all of SCRIPT tag contents</strong>, whereas innerText doesn't.</p> <p>Just to make things more entertaining, Opera - besides implementing standard <code>textContent</code> - decided to also add MSHTML's <code>innerText</code> <strong>but changed it to act as <code>textContent</code></strong> - i.e. including SCRIPT contents (in fact, <code>textContent</code> and <code>innerText</code> in Opera seem to produce identical results, probably being just aliased to each other).</p> <p><code>textContent</code> is part of <code>Node</code> interface, whereas <code>innerText</code> is part of <code>HTMLElement</code>. This, for example, means that you can "retrieve" <code>textContent</code> but not <code>innerText</code> from text nodes:</p> <pre><code>var el = document.createElement('p'); var textNode = document.createTextNode('x'); el.textContent; // "" el.innerText; // "" textNode.textContent; // "x" textNode.innerText; // undefined </code></pre> <p>Finally, Safari 2.x also has buggy <code>innerText</code> implementation. In Safari, <code>innerText</code> functions properly only if an element is neither hidden (via <code>style.display == "none"</code>) nor orphaned from the document. Otherwise, <code>innerText</code> results in an empty string.</p> <p>I was playing with <code>textContent</code> abstraction (to work around these deficiencies), but it turned out to be <a href="http://groups.google.com/group/comp.lang.javascript/msg/d1574256dea74077" rel="noreferrer">rather complex</a>.</p> <p>You best bet is to <strong>first define your exact requirements</strong> and follow from there. It is often possible to simply strip tags off of <code>innerHTML</code> of an element, rather than deal with all of the possible <code>textContent</code>/<code>innerText</code> deviations.</p> <p>Another possibility, of course, is to walk the DOM tree and collect text nodes recursively.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload