[英]How to create template element dynamically with DOM operations
我喜欢使用 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.