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可以采用TextNodes和多个参数：