innerText vs innerHTML vs label vs text vs textContent vs outerText

by

From MDN:

Internet Explorer introduced element.innerText. The intention is pretty much the same [as textContent] with a couple of differences:

  • Note that while textContent gets the content of all elements, including <script> and <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.

So innerText will not include text that is hidden by CSS, but textContent will.

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. Because the text is not parsed as HTML, it’s likely to have better performance. Moreover, this avoids an XSS attack vector.

In case you missed that, let me repeat it more clearly: Do not use .innerHTML unless you specifically intend to insert HTML within an element and have taken the necessary precautions to ensure that the HTML you are inserting cannot contain malicious content. If you only want to insert text, use .textContent or if you need to support IE8 and earlier, use feature detection to switch off between .textContent and .innerText.

A main reason that there are so many different properties is that different browsers originally had different names for these properties, and there still isn’t complete cross-browser support for all of them. If you are using jQuery, you should stick to .text() since that is designed to smooth out cross-browser differences.*

For some of the others: outerHTML is basically the same as innerHTML, except that it includes the start and end tags of the element it belongs to. I can’t seem to find much description of outerText at all. I think that is probably an obscure legacy property and should be avoided.

More Related Contents:

  1. How can I change an element’s class with JavaScript?
  2. Is there a spec that the id of elements should be made global variable?
  3. Converting HTML string into DOM elements?
  4. Check if an element contains a class in JavaScript?
  5. Chrome extension – retrieving global variable from webpage
  6. Get next / previous element using JavaScript?
  7. How to resolve the C:\fakepath?
  8. Get selected option text with JavaScript
  9. How to get the element clicked (for the whole document)?
  10. Can I load an entire HTML document into a document fragment in Internet Explorer?
  11. What is innerHTML on input elements?
  12. Getting value of HTML Checkbox from onclick/onchange events
  13. JavaScript DOM: Find Element Index In Container
  14. Adding an onclick event to a table row
  15. Is innerHTML asynchronous?
  16. Does the onchange event propagate?
  17. Change ‘s option and trigger events with JavaScript
  18. Is there any “on DOM change” event? [duplicate]
  19. Can I apply CSS to the elements within an iframe?
  20. Changing the order of elements
  21. createElement vs. createElementNS
  22. Does HTML Hidden control have any events? Like onchange or something?
  23. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  24. Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
  25. Uncaught TypeError: Cannot read property ‘top’ of undefined
  26. getElementsByClassName() with two classes
  27. What is the difference between `firstChild` and `firstElementChild`?
  28. How can I get access to a Highcharts chart through a DOM-Container?
  29. How can I remove wrapper (parent element) without removing the child?
  30. Why does

Leave a Comment