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

Are there better ways of inserting HTML into the DOM than insertAdjacentHTML() and a huge HTML string?

本文关键字：HTML 更好 字符串 方法 插入 DOM 巨大 insertAdjacentHTML 一个 有没有      更新时间：2023-09-26

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

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

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

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

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

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

handlers.js网站包括一些示例，例如将HTML包含在.HTML文件中，选择元素并解析其内容：

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

<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作为一个单独的文件加载，或者如果你很大胆，可以编写自己的transpiler来将HTML粘贴在Javascript中（这基本上就是React对JSX所做的）

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

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

祝你好运！

相关文章：