171

I have a dropdown list which is populated by Javascript.

Whilst deciding what should be the default value to show on load, I realised that the following properties showed exactly the same values:

  • innerText
  • innerHTML
  • label
  • text
  • textContent
  • outerText

My own research shows bench marking tests or comparisons between a few of them, but not all.

I can use my own common sense and choose 1 or the other as they provide the same result, but, I'm concerned this is not going to be a good idea if the data were to change.

My findings are:

  • innerText will show the value as is and ignores any HTML formatting which may be included
  • innerHTML will show the value and apply any HTML formatting
  • label appears to be the same as innerText, so I can't see the difference
  • text appears to be the same as innerText but the jQuery shorthand version
  • textContent appears to the same as innerText but keeps formatting (such as \n)
  • outerText appears to be the same as innerText

My research can only take me so far as I can only test what I can think of or read what is published, can any one confirm though if my research is correct and if there is anything special about label and outerText?

4

6 Answers 6

140

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.

7
  • 3
    The problem with that doc's advice, in order to retrieve or write text within an element, people use innerHTML. textContent should be used instead, is that textContent is not supported by IE 8, which is still in fairly widespread use because that's the version bundled with Windows 7. And FireFox doesn't support innerText. So while innerHTML isn't ideally suited for the purpose, it has better cross-browser reliability.
    – Adi Inbar
    May 8, 2015 at 1:10
  • 5
    @AdiInbar If you need to support old browsers, the correct thing to do is to use feature detection to switch off between .textContent and .innerText, or to use something like jQuery that smooths out these browser differences.
    – JLRishe
    May 8, 2015 at 5:11
  • 1
    Thank you so much for this explanation! I am using flot to display charts and it wasn't showing in ff because ff uses textContent. Innertext was always undefined when I used the tickFormatter.
    – Rainhider
    Jul 20, 2015 at 19:29
  • 1
    @bvl You can't use textContent with HTML tags. If you need to insert HTML, you would either use .innerHTML or build up HTML nodes using document.createElement(), etc.
    – JLRishe
    Sep 2, 2015 at 14:34
  • 6
    Security: Incorrect usage of innerHTML (unlike textContent) can open the door for XSS (Cross-Site Scripting) attacks on your application. If the content being inserted into the DOM via innerHTML is not completely trusted, an attacker could use a <script> element to hijack your application authenticated under a user or admin's authorization level. All attacks, including strange-looking attacks like <img src="x.x" onerror="alert('Hacked!');"/> and a myriad of sneakier ones are effectively destroyed by simply using textContent in this context instead of the dangerous innerHTML. Mar 17, 2016 at 4:12
17

Addendum to JLRishe's otherwise excellent answer:

The reason innerText and outerText both exist is for symmetry with innerHTML and outerHTML. This becomes important when you assign to the property.

Suppose you've got an element e with HTML code <b>Lorem Ipsum</b>:

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!
9

A dropdown list comprises a collection of Option objects, so you should use the .text property to inspect the textual representation of the element, i.e.

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

Btw,

.text appears to be the same as .innerText but the JQuery shorthand version

That's not correct; $(element).text() is the jQuery version whereas element.text is the property access version.

8

text and label remove extra spaces. I got these results when querying options in a dropdown:

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"
3
  • upvoted because everyone talked the others but you were the only one to compare label and text
    – MrU
    Oct 25, 2020 at 8:22
  • @Lars-Lasse Yes, they are part of the DOM API; they’re getters / setters on HTMLOptionElements, as the answer suggests. See Web IDL definitions in the HTML spec. This answer is potentially misleading and incomplete. Dec 16, 2021 at 17:12
  • @SebastianSimon Thanks mate, didn't notice it was regarding the <option> tag. Removed the comment.
    – Lars-Lasse
    Dec 17, 2021 at 20:57
4

textContent will not format (\n)

1

See the browsers compatibility http://www.quirksmode.org/dom/html/ if you are targeting specific browsers. Because it seems like they all have their own way of doing things. That is why is is better to use JQuery .text() (http://api.jquery.com/text/) if you do not want to fiddle around.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.