HTML template标签如何动态设置content属性值？
- 内容介绍
- 文章标签
- 相关推荐
本文共计743个文字，预计阅读时间需要3分钟。
直接使用 `appendChild(template.content)` 会清空 `template` 内的内容，并且后续调用会获取到空 `fragment`。因为 `DocumentFragment` 只能有一个父节点，移动操作是剪切而非复制。
正确做法永远是克隆：
-
template.content.cloneNode(true)—— 深克隆全部子节点（推荐） -
document.importNode(template.content, true)—— 语义更明确，尤其在跨文档场景下更安全 - 不要用
innerHTML读取<template>内容，它返回空字符串
template 内部脚本、图片、样式全不生效，别指望自动触发
<template> 的内容处于“离线状态”：里面的 <script> 不执行，<img src> 不发请求，<style> 不参与 CSSOM 构建，for 属性指向的表单控件也不建立关联。
本文共计743个文字，预计阅读时间需要3分钟。
直接使用 `appendChild(template.content)` 会清空 `template` 内的内容，并且后续调用会获取到空 `fragment`。因为 `DocumentFragment` 只能有一个父节点，移动操作是剪切而非复制。
正确做法永远是克隆：
-
template.content.cloneNode(true)—— 深克隆全部子节点（推荐） -
document.importNode(template.content, true)—— 语义更明确，尤其在跨文档场景下更安全 - 不要用
innerHTML读取<template>内容，它返回空字符串
template 内部脚本、图片、样式全不生效，别指望自动触发
<template> 的内容处于“离线状态”：里面的 <script> 不执行，<img src> 不发请求，<style> 不参与 CSSOM 构建，for 属性指向的表单控件也不建立关联。