Question

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

我目前的做法是复制粘贴我需要插入到JS文件中的HTML，格式化它以使其在字符串中无错误，然后使用insertAdjacentHTML()插入

每当我碰巧滚动它时，在JS中拥有一个巨大的，多行的复制粘贴HTML字符串就会感觉很脏。

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

在这种情况下，更好的是一种安全的实现，这是可读性的改进。

Answer 1

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

handlebars.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作为单独的文件加载，或者如果您大胆，编写自己的转换器以将HTML粘贴到Javascript中（这基本上是React对JSX所做的）

最后要考虑的事情是：您需要确保注入的HTML不包含任何潜在的XSS漏洞，或者由于添加HTML而导致任何DOM事件无法搞砸（尽管使用insertAdjacentHTML可以防止事件发生。）

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

祝你好运！

是否有更好的方法将HTML插入DOM而不是insertAdjacentHTML（）和一个巨大的HTML字符串？

1 个答案: