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