Question

我最近一直在玩，并注意到一些涉及.textContent属性的奇怪行为。

// I understand that .innerHTML should be used here.
document.body.textContent += 'string<br />';
document.body.textContent += 'string<br />';

我的问题不是如何防止这种情况发生，问题是：是什么导致代码被添加到文档正文中，为什么这只发生在第一个.textContent而不是第二个？< / p>

另请注意，string<br />正在添加到正文中。

其他好奇心：此行为在firefox和chrome中都可以重现，包括代码snippits和普通网页，但不在FIDDLE

Answer 1

您的脚本由堆栈代码段放置在正文中。

script元素包含一些隐藏的文本内容（脚本代码）。

但是，无论如何textContent都包括它。如果您使用的是非标准的IE innerText，那就不会发生。

根据MDN，

Differences from innerText

Internet Explorer介绍了element.innerText。意图是   类似但有以下不同之处：


虽然textContent获取所有元素的内容，包括<script>和<style>元素，但特定于IE的属性innerText会   不

innerText知道样式，不会返回隐藏元素的文本，而textContent则会。

由于innerText知道CSS样式，它会触发重排，而textContent则不会。

Answer 2

因为代码在文档正文中。

<body>
    <script></script>
</body>

它在小提琴中处于领先地位。

<html>
    <script></script>
</html>
<body>
</body>

textContent正在选择正文和兄弟元素的所有文本，并且您正在添加它。

为什么.textContent会将意外内容添加到文档正文中

2 个答案: