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

【问题标题】：How to create template element dynamically with DOM operations如何使用 DOM 操作动态创建模板元素
【发布时间】：2020-09-29 16:04:03
【问题描述】：

我喜欢使用 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 组件标准的作者没有考虑到这一点，所以我在这里肯定有一些东西被忽略了。

【问题讨论】：

【解决方案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 和多个参数：

【讨论】：

它确实适用于附加到content。但是在HTML spec 中，您可以阅读：“由于 DOM 操作，模板元素也有可能包含 Text 节点和元素节点；但是，拥有 any 违反了模板元素的内容模型，因为它的内容模型被定义为无。”。这听起来好像不是预期的方法。
该注释是关于template.append 场景的。可以添加节点，但是那个就是违规