如何使用 DOM 操作動態創建模板元素

Question

我喜歡使用 JavaScript DOM 操作動態創建 HTML 模板元素。 像這樣的東西：

const template = document.createElement("template")

const div = document.createElement("div")

template.append(div)

但是，當使用append時，模板content屬性中將不提供 div 容器。 相反，您必須像這樣使用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 和多個參數：