Javascript 有没有比insertAdjacentHTML（）和一个巨大的HTML字符串更好的方法将HTML插入DOM？

我需要在DOM中插入大量HTML

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

insertAdjacentHTML（）

插入

在JS中有一个巨大的、多行的复制粘贴HTML字符串，每次我在其中滚动时都会感觉脏兮兮的

唯一的限制是，如果可以的话，我真的想避免使用库

---

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

即使您不希望使用HTML模板工具，也可以以类似的方式包含HTML

该站点包括一些示例，例如将HTML包含在.HTML文件中、选择元素以及解析其内容：

---

通过将模板包含在标记中，可以将其传递到浏览器

---

在您的例子中，您可以将html中的

type

属性替换为任何明显的属性，并通过调用

document.querySelector（“htmlString”）.innerHTML来检索内容

其他选项包括通过AJAX将HTML作为单独的文件加载，或者如果您有胆量的话，编写自己的transpiler将HTML粘贴到Javascript中（这基本上就是React使用JSX所做的）

最后要考虑的一点是：您需要确保注入的HTML不包含任何潜在的XSS漏洞，或者任何DOM事件都不会因为添加HTML而出错（尽管使用
insertAdjacentHTML
应该可以防止事件中断）

此外，考虑一下我刚才写的HTML注入代码，以确保避免（一些但不是全部）可能的陷阱：

祝你好运
 从您的问题来看，不清楚在插入之前需要对字符串进行什么（如果有）额外处理，或者从实际角度看，“脏”是什么意思。将内容保留在html文件中，进行AJAX调用以获取文件内容并用于DOM操作（插入、迭代添加…）
<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

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