我喜欢使用 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 组件标准的作者还没有考虑过这一点,所以我一定在这里忽略了一些东西。
最佳答案
你正在做:
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 和多个参数:
https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
关于javascript - 如何使用 DOM 操作动态创建模板元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64123400/