javascript - 有没有比 insertAdjacentHTML() 和一个巨大的 HTML 字符串更好的方法将 HTML 插入到 DOM 中？

Question

我需要向 DOM 中插入大量 HTML。

我目前的做法是将我需要插入的 HTML 复制粘贴到一个 JS 文件中，对其进行格式化，使其在字符串中没有错误，然后使用 insertAdjacentHTML() 来插入。

在 JS 中有一个巨大的、多行的复制粘贴 HTML 字符串，每次我碰巧滚动浏览它时都感觉很脏。

唯一的限制是我真的想尽可能避免使用库。

在这种情况下更好的是几乎是一个安全的实现，它提高了可读性。

Answer 1

即使您不想使用 HTML 模板工具，您仍然可以以类似的方式包含 HTML。

handlebars.js站点包含一些示例，例如在 .html 文件本身中包含 HTML、选择元素以及解析其内容:

---

You can deliver a template to the browser by including it in a tag.

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

Compile a template in JavaScript by using Handlebars.compile

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

---

在您的情况下，您可以将 html 中的 type 属性替换为任何明显的内容，并通过调用 document.querySelector("htmlString").innerHTML 检索内容.

其他选项包括通过 AJAX 将 HTML 作为单独的文件加载，或者如果你有胆量，可以编写自己的转译器为你将 HTML 粘贴到 Javascript 中(这基本上是 React 使用 JSX 所做的)

最后要考虑的一件事:您需要确保注入(inject)的 HTML 不包含任何潜在的 XSS 漏洞，或者任何 DOM 事件都不会因为添加 HTML 而搞砸(尽管使用 insertAdjacentHTML 应该防止事件中断)。

此外，请考虑查看我之前写的这段 HTML 注入(inject)代码，以确保您避免(部分但不是全部)可能的陷阱: https://github.com/jsweeneydev/HTMLTemplate/blob/master/htmltemplate.js

祝你好运!