InnerText vs innerHtml vs label vs text vs textContent vs externalText

Question

I have a dropdown that populates Javascript.

Having determined what should be the default value displayed at boot time, I realized that the following properties showed exactly the same values:

• innerText
• innerHtml
• label
• text
• textContent
• outerText

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

I can use my own common sense and choose 1 or the other, as they give the same result, but I am worried that it would not be a good idea if the data changed.

My findings:

• innerText will show the value as is and ignore any HTML formatting that may be included
• innerHtml display the value and apply any HTML formatting
• label looks the same as innerText , I don't see the difference
• text looks the same as innerText , but a shortened version of jQuery
• textContent displayed just like innerText , but retains formatting (e.g. \n )
• outerText looks the same as innerText

My research can only keep me busy as long as I can only verify that I can think or read what is published, can someone confirm if my research is correct and if something special is in label and outerText ?

Answer 1

From MDN :

Internet Explorer introduces the element.innerText element. The intent is pretty much the same as [textContent] with a few differences:

• Please note: while textContent gets the contents of all elements, including <script> and <style> elements, basically equivalent IE-specific property, innerText does not support.

• innerText also knows the style and will not return the text of hidden elements, whereas textContent will.

• Since innerText knows the CSS style, it invokes reflection, while textContent does not.

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

innerHTML returns HTML as its name indicates. Quite often, people use innerHTML to retrieve or write text inside an element. Instead, use textContent. Since the text is not parsed as HTML, it probably has better performance. In addition, this avoids the attack of the XSS vector.

In case you missed this, let me repeat it more clearly: do not use .innerHTML unless you specifically intend to embed HTML in an element and take the necessary precautions to make sure that the embed HTML cannot contain malicious content. If you want to insert text, use .textContent or if you need to support IE8 and earlier, use the function detection function to disable between .textContent and .innerText .

The main reason that there are so many different properties is because different browsers initially had different names for these properties, and still there is no full cross-browser support for all of them. If you are using jQuery you should stick with .text() as this is intended to smooth out differences between browsers. *

For some of the others: outerHTML is basically the same as innerHTML , except that it includes the start and end tags of the element to which it belongs. I generally can not find much description of outerText . I think this is probably an obscure legacy and should be avoided.

Answer 2

The drop-down list contains a collection of Option objects, so you should use the .text property to check the text representation of the element, i.e.

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

Btv,

.text turns out to be the same as .innerText , but a shortened version of jQuery

It is not right; $(element).text() is the jQuery version, while element.text is the version of accessing properties.

Answer 3

Adding a great answer to the JLR:

The reason innerText and outerText exists for symmetry with innerHTML and outerHTML. This becomes important if you assign a property.

Suppose you have an e element with HTML <b>Lorem Ipsum</b> code:

 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! 

Answer 4

See browser compatibility http://www.quirksmode.org/dom/html/ if you are targeting specific browsers. Because it seems that everyone has their own way of doing something. Therefore, it is better to use JQuery.text () ( http://api.jquery.com/text/ ) if you do not want to engage in a script.

Answer 5

textContent will not format (\ n)