blocks|key|2737698|text|来自MDN|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2737699|2737700|+Internet+Explorer引入了element.innerText。其意图与textContent基本相同，但有几点不同：|blockquote|2737701|2737702|2737703|2737704|请注意，虽然textContent获取所有元素的内容，包括<script>和<style>元素，但最等效的特定于IE的属性innerText则不能。|unordered-list-item|style|CODE|2737705|2737706|2737707|innerText也能识别样式，不会返回隐藏元素的文本，而textContent会。|2737708|2737709|2737710|因为innerText知道CSS样式，所以它会触发回流，而textContent不会。|2737711|2737712|所以innerText不会包含CSS隐藏的文本，但textContent会包含。|2737713|正如其名称所示，|2737714|+innerHTML返回超文本标记语言。通常，为了在元素中检索或写入文本，人们使用innerHTML。应该改用textContent。因为文本不会被解析为HTML，所以它可能具有更好的性能。此外，这避免了XSS攻击向量。|2737715|2737716|2737717|如果您遗漏了这一点，让我更清楚地重复一遍:除非您特别打算在元素中插入，并且已经采取了必要的预防措施以确保您要插入的不包含恶意内容，否则不要使用.innerHTML。如果只想插入文本，请使用.textContent，或者如果需要支持IE8和更早版本，请使用特征检测在.textContent和.innerText__之间切换。|BOLD|2737718|有这么多不同的属性的一个主要原因是不同的浏览器最初对这些属性有不同的名称，并且仍然没有对所有这些属性的完全跨浏览器支持。如果你正在使用jQuery，你应该坚持使用.text()，因为它旨在消除跨浏览器的差异。*|2737719|对于其他一些元素：outerHTML基本上与innerHTML相同，只是它包含了它所属元素的开始和结束标记。我似乎找不到太多关于outerText的描述。我认为这可能是一个模糊的遗留属性，应该避免。|2737720|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent#Differences_from_innerText^0|2|3|0|0|0|0|0|0|0|T|8|12|7|0|0|0|0|0|0|0|0|2|9|P|B|0|0|0|0|0|Y|N|1Z|A|2M|C|3O|C|41|A|0|29|7|0|9|9|M|9|1S|9|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@$A|1M|B|1N|1|1O]]|C|$]]|$1|D|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|1Q|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|1R|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|1S|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|1T|8|@]|9|@]|C|$]]|$1|K|3|L|5|M|7|1U|8|@$A|1V|B|1W|N|O]|$A|1X|B|1Y|N|O]]|9|@]|C|$]]|$1|P|3|-4|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|20|8|@]|9|@]|C|$]]|$1|R|3|S|5|M|7|21|8|@]|9|@]|C|$]]|$1|T|3|-4|5|6|7|22|8|@]|9|@]|C|$]]|$1|U|3|-4|5|6|7|23|8|@]|9|@]|C|$]]|$1|V|3|W|5|M|7|24|8|@]|9|@]|C|$]]|$1|X|3|-4|5|6|7|25|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|6|7|26|8|@$A|27|B|28|N|O]|$A|29|B|2A|N|O]]|9|@]|C|$]]|$1|10|3|11|5|6|7|2B|8|@]|9|@]|C|$]]|$1|12|3|13|5|G|7|2C|8|@]|9|@]|C|$]]|$1|14|3|-4|5|6|7|2D|8|@]|9|@]|C|$]]|$1|15|3|-4|5|6|7|2E|8|@]|9|@]|C|$]]|$1|16|3|17|5|6|7|2F|8|@$A|2G|B|2H|N|18]|$A|2I|B|2J|N|O]|$A|2K|B|2L|N|O]|$A|2M|B|2N|N|O]|$A|2O|B|2P|N|O]]|9|@]|C|$]]|$1|19|3|1A|5|6|7|2Q|8|@$A|2R|B|2S|N|O]]|9|@]|C|$]]|$1|1B|3|1C|5|6|7|2T|8|@$A|2U|B|2V|N|O]|$A|2W|B|2X|N|O]|$A|2Y|B|2Z|N|O]]|9|@]|C|$]]|$1|1D|3|-4|5|6|7|30|8|@]|9|@]|C|$]]]|1E|$1F|$5|1G|1H|1I|C|$1J|1K]]]]

From <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent#Differences_from_innerText" rel="noreferrer">MDN</a>:
<blockquote>
Internet Explorer introduced element.innerText. The intention is pretty much the same [as textContent] with a couple of differences:
<ul>
<li>Note that while textContent gets the content of all elements, including <code>&lt;script&gt;</code> and <code>&lt;style&gt;</code> elements, the mostly equivalent IE-specific property, innerText, does not.
</li>
<li>innerText is also aware of style and will not return the text of hidden elements, whereas textContent will.
</li>
<li>As innerText is aware of CSS styling, it will trigger a reflow, whereas textContent will not.
</li>
</ul>
</blockquote>
So <code>innerText</code> will not include text that is hidden by CSS, but <code>textContent</code> will.
<blockquote>
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.
</blockquote>
In case you missed that, let me repeat it more clearly: Do not use <code>.innerHTML</code> 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 <code>.textContent</code> or if you need to support IE8 and earlier, use feature detection to switch off between <code>.textContent</code> and <code>.innerText</code>.
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 <code>.text()</code> since that is designed to smooth out cross-browser differences.*
For some of the others: <code>outerHTML</code> is basically the same as <code>innerHTML</code>, except that it includes the start and end tags of the element it belongs to. I can't seem to find much description of <code>outerText</code> at all. I think that is probably an obscure legacy property and should be avoided.

blocks|key|155467|text|下拉列表由Option对象的集合组成，因此您应该使用.text属性来检查元素的文本表示形式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|155468|<option+value="123">text+goes+here</option>
++++++++++++++++++++%5E%5E%5E%5E%5E%5E%5E%5E%5E%5E%5E%5E%5E%5E|code-block|syntax|javascript|155469|顺便说一句，|155470|155471|+.text似乎与.innerText相同，但却是JQuery速记版本|blockquote|155472|155473|155474|这是不正确的；$(element).text()是jQuery版本，而element.text是属性访问版本。|155475|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/API/HTMLOptionElement^0|5|6|Q|5|5|6|0|0|0|0|0|1|5|9|A|0|0|0|7|H|Z|C|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]]|E|$]]|$1|F|3|G|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1B|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1K|8|@$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

A dropdown list comprises a collection of <a href="https://developer.mozilla.org/en/docs/Web/API/HTMLOptionElement"><code>Option</code></a> objects, so you should use the <code>.text</code> property to inspect the textual representation of the element, i.e.

<pre><code>&lt;option value="123"&gt;text goes here&lt;/option&gt;
 ^^^^^^^^^^^^^^
</code></pre>

Btw,

<blockquote>
 <code>.text</code> appears to be the same as <code>.innerText</code> but the JQuery shorthand version
</blockquote>

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

blocks|key|152722|text|如果您针对的是特定的浏览器，请参阅browsers+compatibility+http://www.quirksmode.org/dom/html/。因为他们似乎都有自己的做事方式。这就是为什么如果您不想浪费时间，最好使用JQuery+.text()+(http://api.jquery.com/text/)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|152723|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/dom/html/|1|http://api.jquery.com/text/^0|14|Z|0|3K|R|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

See the browsers compatibility <a href="http://www.quirksmode.org/dom/html/" rel="nofollow">http://www.quirksmode.org/dom/html/</a> 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() (<a href="http://api.jquery.com/text/" rel="nofollow">http://api.jquery.com/text/</a>) if you do not want to fiddle around.

blocks|key|2737754|text|JLRishe的其他优秀答案的附录：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2737755|innerText和outerText同时存在的原因是为了与innerHTML和outerHTML对称。当您将分配给属性时，这一点变得很重要。|2737756|假设您有一个带有HTML代码Lorem+Ipsum的元素e|offset|length|style|CODE|2737757|e.innerHTML+=+"Hello+World!";+=>+Hello+World!
e.outerHTML+=+"Hello+World!";+=>++++Hello+World!
e.innerText+=+"Hello+World!";++++++++=>+Hello+World!
e.outerText+=+"Hello+World!";++++++++=>++++Hello+World!|code-block|syntax|javascript|2737758|entityMap^0|0|0|E|I|Z|1|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@$F|T|G|U|H|I]|$F|V|G|W|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|X|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

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 <code>e</code> with HTML code <code>&lt;b&gt;Lorem Ipsum&lt;/b&gt;</code>:

<pre><code>e.innerHTML = "&lt;i&gt;Hello&lt;/i&gt; World!"; =&gt; &lt;b&gt;&lt;i&gt;Hello&lt;/i&gt; World!&lt;/b&gt;
e.outerHTML = "&lt;i&gt;Hello&lt;/i&gt; World!"; =&gt; &lt;i&gt;Hello&lt;/i&gt; World!
e.innerText = "Hello World!"; =&gt; &lt;b&gt;Hello World!&lt;/b&gt;
e.outerText = "Hello World!"; =&gt; Hello World!
</code></pre>

blocks|key|2737768|text|textContent不会格式化(\n)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2737769|entityMap^0|0|B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<code>textContent</code> will not format (\n)

blocks|key|2950544|text|text和label删除额外的空格。在下拉列表中查询选项时，我得到了以下结果：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2950545|e.textContent+=+"A++++B+C+++D+++++"
e.text+=+"A+B+C+D"
e.label+=+"A+B+C+D"|code-block|syntax|javascript|2950546|entityMap^0|0|4|5|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

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

<pre><code>e.textContent = "A B C D "
e.text = "A B C D"
e.label = "A B C D"
</code></pre>

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:

<ul>
<li><code>innerText</code></li>
<li><code>innerHtml</code></li>
<li><code>label</code></li>
<li><code>text</code></li>
<li><code>textContent</code></li>
<li><code>outerText</code></li>
</ul>

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:

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

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 <code>label</code> and <code>outerText</code>?

innerText vs innerHTML vs label vs text vs textContent vs outerText

jQuery

我有一个由Javascript填充的下拉列表。在决定加载时应该显示什么默认值时，我意识到以下属性显示了完全相同的值：innerTextinnerHtmllabeltexttextContentouterText我自己的研究显示了一些基准测试或它们之间的比较，但不是全部。我可以使用自己的常识，选择一个或另一个，因为它们提...

问innerText vs innerHTML vs label vs text vs textContent vs outerText
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问innerText vs innerHTML vs label vs text vs textContent vs outerTextEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问innerText vs innerHTML vs label vs text vs textContent vs outerText
EN