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

Posted 2023-05-07

【中文标题】将 </> 文本附加为 html 时，它不会加载到 DOM [关闭]

【英文标题】：when appending the </> text as html, it's not load into the DOM [closed]

【发布时间】：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 = '</>'

【参考方案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 的评论。

【讨论】：

对于想知道的人：lt 表示 lesser than 和 gt 表示 greater than

@Reyno 这是less than ***.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 谢谢，为了更清楚更新了答案