将 </> 文本附加为 html 时，它不会加载到 DOM [关闭]答案

【问题标题】：when appending the </> text as html, it's not load into the DOM [closed]将 </> 文本附加为 html 时，它不会加载到 DOM [关闭]
【发布时间】：2021-07-29 17:36:40
【问题描述】：

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

例如：

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


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

   result:  "<div></div>"

我不知道为什么。谁能帮我澄清一下？

提前致谢！

【问题讨论】：

因为</> 不是有效的HTML？（至少这是我的理解......如果我错了请纠正我）
你想通过使用</>来达到什么目的？
我认为您的问题可能是因为您试图将</> 放入<div></div> 中。如果您输入其他文本而不是 </>，那么您的代码应该可以工作，只要您没有任何其他语法错误。
这能回答你的问题吗？ How to display HTML tags as plain text
如果您只想将</> 放入容器中，您可以这样做 -> innerText = '</>'

标签： javascript html jquery dom innerhtml

【解决方案1】：

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

&lt; = &lt; 和&gt; = &gt;：

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 的评论。

【讨论】：

对于想知道的人：lt 表示 lesser than 和 gt 表示 greater than
@Reyno 这是less than stackoverflow.com/questions/5068951/what-do-lt-and-gt-stand-for ell.stackexchange.com/a/821/55055
如果你想在代码中对 html 进行转义，你可以使用 DOM 为你做这件事。例如。 const escHtml = s => { const a = document.createElement('div'); a.innerText = s; return a.innerHTML; }
@Keith 谢谢，为了更清楚更新了答案