如何高效使用HTML5 template克隆节点及contentDocumentFragment复用模板？
- 内容介绍
- 文章标签
- 相关推荐
本文共计741个文字，预计阅读时间需要3分钟。
直接复制以下代码：
真正能触发执行的只有两种方式：
- 手动调用
eval()（不推荐，有 CSP 和安全风险） - 把克隆后的
<script>插入文档流（如 append 到document.body），且该<script>是内联脚本（无src）
注意：带 src 的外链脚本即使插入 DOM 也不会二次加载——浏览器会跳过已解析过的相同 URL。
template.content 为什么不能直接 cloneNode？
<template> 的 content 属性返回的是 DocumentFragment，它不是元素节点，没有 cloneNode() 方法。常见错误是写成 template.content.cloneNode(true)，直接报 TypeError: template.content.cloneNode is not a function。
本文共计741个文字，预计阅读时间需要3分钟。
直接复制以下代码：
真正能触发执行的只有两种方式：
- 手动调用
eval()（不推荐，有 CSP 和安全风险） - 把克隆后的
<script>插入文档流（如 append 到document.body），且该<script>是内联脚本（无src）
注意：带 src 的外链脚本即使插入 DOM 也不会二次加载——浏览器会跳过已解析过的相同 URL。
template.content 为什么不能直接 cloneNode？
<template> 的 content 属性返回的是 DocumentFragment，它不是元素节点，没有 cloneNode() 方法。常见错误是写成 template.content.cloneNode(true)，直接报 TypeError: template.content.cloneNode is not a function。