如何将HTML附加到页面上，就像纯文本一样

Question

我在DOM中有<li>，想要插入一些类似普通文本的HTML字符串。但是它附加了HTML代码。很抱歉我的英语不好。

示例

<li></li> - empty list element

我想将字符串<script>alert(1)</script>添加到li元素中，作为文本显示，但不执行其中的脚本。

- QuodNephilim

---

你想将javascript添加到HTML中，但又不希望它被执行？ - Saransh Kataria

使用HTML实体：<script>等。通过innerHTML插入的脚本元素不会被执行。 - RobG

你的意思是你有一个包含HTML的字符串，想要将其作为纯文本输出吗？ - NewToJS

@QuodNephilim - 这正是如果将<script>作为HTML插入时会产生的结果。 - RobG

@ahsanayub——鉴于被接受的答案与如何将HTML插入为文本中的一个答案完全相同，我认为这是一个重复的问题。 - RobG

Answer 1

你可以使用innerText，就像这样：

document.querySelector('li').innerText += '<script>alert(1)<\/script>';

<li></li>

但是请记住，您需要转义某些字符。

- Angelos Chalaris

---

你的代码片段中有错误。 - QuodNephilim

@QuodNephilim 事实上，我已经修复了它，请刷新以查看。 - Angelos Chalaris

基本上 document.querySelector('li').innerText = document.querySelector('li').innerText + '<script>alert(1)<\/script>'; 但你应该将它放入一个变量中。 - Steve Kirsch

@SteveKirsch += 也可以完成这个任务，已经更新，感谢提醒！ - Angelos Chalaris

@ahsanayub 我不是已经解释过了吗？innerText 是 CSS 感知的，而且在获取时只返回元素 textContent 的可见部分。因此，当你调用它的 getter 时，浏览器将执行回流（以便知道此时可见的 textContent 是什么）。如果节点有一些隐藏的 textContent，则会忽略这些隐藏的部分。 - Kaiido