如何使用 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组件标准的作者们没有考虑过这个问题，因此我肯定有什么遗漏。

- Manuel Mauky

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，因为您没有使用返回值。而且，append 方法可以接受 TextNodes 和多个参数：

https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/append

- Danny '365CSI' Engelman

---

它确实可以通过将内容追加到 content 上来运行。但是在 HTML 规范 中，你可以读到："由于 DOM 操作的结果，模板元素也可能包含文本节点和元素节点；但是，任何这样做都会违反模板元素的内容模型，因为它的内容模型被定义为"无"。"这听起来似乎不是期望的方法。 - Manuel Mauky

那个笔记是关于“template.append”场景的。可以添加节点，但是那是违规的。 - Danny '365CSI' Engelman