Menu
I've heard that using el.innerText||el.textContent can yield unreliable results, and that's why I've always insisted on using the following function in the past:
function getText(node) { if (node.nodeType === 3) { return node.data; } var txt = ''; if (node = node.firstChild) do { txt += getText(node); } while (node = node.nextSibling); return txt; } This function goes through all nodes within an element and gathers the text of all text nodes, and text within descendants:
E.g.
<div id="x">foo <em>foo...</em> foo</div> Result:
getText(document.getElementById('x')); // => "foo foo... foo" I'm quite sure there are issues with using innerText and textContent, but I've not been able to find a definitive list anywhere and I am starting to wonder if it's just hearsay.
Can anyone offer any information about the possibly lacking reliability of textContent/innerText?
EDIT: Found this great answer by Kangax -- 'innerText' works in IE, but not in Firefox
611
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.
Note: Unlike innerHTML, textContent has better performance because its value is not parsed as HTML. For that reason, using textContent can also prevent Cross-Site Scripting (XSS) attacks. Unlike innerText, textContent isn't aware of CSS styling and will not trigger a reflow.
textContents is all text contained by an element and all its children that are for formatting purposes only. innerText returns all text contained by an element and all its child elements. innerHtml returns all text, including html tags, that is contained by an element.
value is for form elements to get the value of the form element. input. textContent is for other elements to get the content of the element.
It's all about endlines and whitespace - browsers are very inconsistent in this regard, especially so in Internet Explorer. Doing the traversal is a sure-fire way to get identical results in all browsers.
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
