javascript - innerText vs innerHtml vs label vs text vs textContent vs outerText -

javascript - innerText vs innerHtml vs label vs text vs textContent vs outerText -

i have dropdown list populated javascript.

whilst deciding should default value show on load, realised next properties showed same values:

innertext innerhtml label text textcontent outertext

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

i can utilize own mutual sense , take 1 or other provide same result, but, i'm concerned not going thought if info change.

my findings are:

innertext show value , ignores html formatting may included innerhtml show value , apply html formatting label appears same innertext, can't see difference text appears same innertext jquery shorthand version textcontent appears same innertext keeps formatting (such \n) outertext appears same innertext

my research can take me far can test can think of or read published, can 1 confirm though if research right , if there special label , outertext?

from mdn:

internet explorer introduced element.innertext. intention pretty much same couple of differences [compared textcontent]:

note while textcontent gets content of elements, including <script> , <style> elements, equivalent ie-specific property, innertext, not.

innertext aware of style , not homecoming text of hidden elements, whereas textcontent will.

as innertext aware of css styling, trigger reflow, whereas textcontent not.

so innertext not include text hidden css, textcontent will.

innerhtml returns html name indicates. quite often, in order retrieve or write text within element, people utilize innerhtml. textcontent should used instead. because text not parsed html, it's have improve performance. moreover, avoids xss attack vector.

a main reason there many different properties different browsers had different names these properties, , there still isn't finish cross-browser back upwards these properties. if using jquery, should stick .text() since designed smooth out cross-browser differences.

for of others: outerhtml same innerhtml, except includes start , end tags of element belongs to. can't seem find much description of outertext @ all. think obscure legacy property , should avoided.

javascript