如何使用 DOM 操作动态创建模板元素

Question

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

const template = document.createElement("template")

const div = document.createElement("div")

template.append(div)

但是，当使用 append 时，div 容器将无法在模板 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，你用的不是return值
并且 append 可以接受 TextNodes 和多个参数：

How to create template element dynamically with DOM operations