innerText vs innerHtml vs label vs text vs textContent vs outerText [英] innerText vs innerHtml vs label vs text vs textContent vs outerText

问题描述

我有一个由Javascript填充的下拉列表。

在决定应该在加载时显示的默认值的同时，我意识到以下属性完全显示相同的值：

• innerText


• innerHtml


• label


• text


• textContent
> outerText

我自己的研究显示了基准测试或几个比较我可以使用自己的常识，并选择1或其他，因为它们提供了相同的结果，但是，我担心这是如果数据发生变化，这不会是一个好主意。

我的发现是：

$ ul $ b

innerText 会按原样显示值并忽略可能包含的任何HTML格式

innerHTML 将显示值并应用任何值HTML格式化

label 看起来与 innerText 相同， t看到区别

text 看起来与 innerText 相同，但是jQuery速记版

textContent 看起来与 innerText 相同，但保留格式化（如 \\\
）

outerText 似乎是与 innerText相同

我的研究只能让我尽可能多只测试我能想到的东西或阅读发表的内容，如果我的研究是正确的，并且如果有什么特别的 label 和 outerText ？

解决方案

From $ b

Internet Explorer引入了elem ent.innerText。其意图与[textContent]几乎相同：

• 请注意，虽然textContent获取所有元素，包括< script> 和< style> 元素，大部分等价的IE特定属性innerText ，




• 由于innerText知道CSS样式，它将触发回流，而textContent不会。

/ blockquote>



因此 innerText 不会包含被CSS隐藏的文本，而是 textContent 将。






innerHTML会按名称显示返回HTML。通常，为了在元素中检索或写入文本，人们使用innerHTML。应该使用textContent代替。由于文本未被解析为HTML，因此可能会有更好的性能。此外，这样可以避免XSS攻击媒介。




如果您错过了这一点，请让我更清楚地重复一遍：除非您专门打算在元素中插入HTML，并已采取必要的预防措施以确保您插入的HTML不能包含恶意内容，否则请勿使用 .innerHTML 内容。如果您只想插入文本，请使用 .textContent 或者如果您需要支持IE8及更早版本，请使用功能检测关闭 .textContent 和 .innerText 。





有这么多的主要原因不同的属性是，不同的浏览器原来对这些属性有不同的名称，并且对于所有这些属性仍然没有完整的跨浏览器支持。如果您使用的是jQuery，您应该坚持 .text（），因为它旨在消除跨浏览器差异。*





其他一些： outerHTML 与 innerHTML 基本相同，只是它包含它所属元素的开始和结束标签。我似乎无法找到 outerText 的详细描述。我认为这可能是一个不起眼的遗产，应该避免。




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 the same as innerText, 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?

解决方案

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.

这篇关于innerText vs innerHtml vs label vs text vs textContent vs outerText的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！