当将 </> 文本附加为 html 时，它不会加载到 DOM

Question

我正在尝试使用 innerHTML 方法将 html 附加到 DOM 中。当内容位于字符串 html 内容中时，我想将其附加到 DOM 中，它将不会加载到 DOM 中。它会自动删除。

例如：

   document.getElementById("container").innerHTML = "<div></></div>";


   console.log(document.getElementById("container").innerHTML);

   result:  "<div></div>"

我不知道为什么。谁能帮我解释一下。？

提前致谢！

Answer 1

要在 HTML 中将 </> 打印为文本，请使用相应的 HTML 代码。

< = < 和 > = >:

document.getElementById("container").innerHTML = "<div>&lt;/&gt;</div>";
console.log(_.escape('</>'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
<div id="container"></div>

underscore/lodash 等常用库有 _.escape 方法可以为您进行转换。有关自定义实现，请参阅下面@Keith 的评论。

当将 </> 文本附加为 html 时，它不会加载到 DOM

when appending the </> text as html, it's not load into the DOM

html

javascript

jquery

dom

innerhtml