如何通过 DOM 操作动态创建模板元素

Question

我喜欢使用 JavaScript DOM 操作动态创建 HTML 模板元素。像这样的东西：

const template = document.createElement("template")

const div = document.createElement("div")

template.append(div)

但是，使用appenddiv 容器时，templates 属性中将不可用content。相反，你必须innerHTML像这样使用：

const template = document.createElement("template")

template.innerHTML = "<div></div>"

这确实有效，因为innerHTML为模板标签实现了特殊行为（请参阅https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#Operational_details）。

然而，innerHTML它也有一些缺点，所以问题是：如何将模板标签与使用创建的内容一起使用document.createElement？

这里的一方面是一些 JavaScript 框架（即 Angular 和 React）确实document.createElement在内部使用来创建 DOM 树。这使得在这些框架中使用模板标签几乎是不可能的。

作为使用模板标签的 Web 组件的作者，我想支持框架用户，但目前我看不到任何方法可以做到这一点，并且我开始考虑完全删除模板标签。另一方面，我无法想象使用innerHTML是这里唯一的方法，并且 Web 组件标准的作者没有考虑到这一点，所以这里肯定有一些我忽略的东西。

Answer 1

你正在做：

  const template = document.createElement("template");
  const div = document.createElement("div");
  template.appendChild(div);

你应该做：

  const template = document.createElement("template");
  const div = document.createElement("div");
  template.content.appendChild(div);

注意您也可以在此处追加，因为您没有使用返回值。
并且append可以接受TextNodes和多个参数：