有比使用insertAdjacentHTML()和大量HTML字符串插入DOM更好的方法吗？

Question

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

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

在JS文件中拥有一个巨大的、多行的HTML字符串，每次滚动时都会感觉很不舒服。

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

在这种情况下，更好的实现方式基本上是一个安全的实现，可以提高可读性。

- Bradley

---

从你的问题中不清楚是否需要在插入之前对字符串进行任何额外处理，或者从实际角度来看，“dirty”是什么意思。 - Robert Harvey

将内容保存在html文件中，使用AJAX调用获取文件内容，并用于DOM操作（插入、迭代添加等）。 - vinayakj

Answer 1

即使您不希望使用HTML模板工具，仍然可以以类似的方式包含HTML。 handlebars.js网站包括一些示例，例如将HTML包含在.html文件本身中，选择元素并解析其内容：

---

您可以通过将模板包含在 <script> 标签中来向浏览器传递模板。

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

使用Handlebars.compile在JavaScript中编译一个模板。

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

---

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

其他选项包括通过AJAX加载HTML作为单独的文件，或者如果您敢于尝试，编写自己的转换器来为您的JavaScript添加HTML（这基本上就是React使用JSX的方式）。

最后一件要考虑的事情是：您需要确保注入的HTML不包含任何潜在的XSS漏洞，或者由于添加HTML而导致任何DOM事件出现问题（但使用insertAdjacentHTML应该可以防止事件出现问题）。

此外，请考虑查看我之前编写的HTML注入代码，以确保您避免了（某些但不是全部）可能的陷阱： https://github.com/jsweeneydev/HTMLTemplate/blob/master/htmltemplate.js 祝你好运！

- Jeffrey Sweeney

---

原PO似乎不想使用库？现在有更好的方法吗？ - oldboy