<template>是只读离线仓库，需通过tpl.content获取DocumentFragment，克隆后修改插入；填值用textContent/value防XSS；批量操作用DocumentFragment提升性能；slot和script不自动生效。
直接用 <template> 标签动态渲染节点，核心就三点：取内容、克隆、填值、插入。它本身不渲染、不执行、不绑定，只是个“离线仓库”，所有操作必须靠 JS 主动触发。
获取模板内容必须用 content
<template> 的 HTML 不在普通子节点里，所以 innerHTML、textContent 都是空的。正确入口只有：
const tpl = document.getElementById('my-tpl');-
const fragment = tpl.content;—— 这是一个只读的DocumentFragment
克隆后才能安全修改和插入
不能直接操作 fragment，它不能重复插入，也不能改内容。必须调用：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
-
const node = fragment.cloneNode(true);—— 得到一份全新、可操作的 DOM 副本 - 之后才能用
querySelector找元素，再设textContent或value - 避免用
innerHTML填值，防止 XSS 和事件丢失
批量插入要用 DocumentFragment 提升性能
循环渲染多条数据时，别每轮都 appendChild 到真实 DOM：
立即学习“Java免费学习笔记（深入）”；
- 先创建中间容器：
const frag = document.createDocumentFragment(); - 每次克隆填值后，
frag.appendChild(node); - 循环结束，只调一次：
container.appendChild(frag);
注意 slot 和 script 不会自动生效
<template> 里的 <slot> 在普通 DOM 中不激活，克隆后改它的内容不会投射；里面的 <script> 或 <style> 也不会执行或重复注入。需要逻辑控制，就得另外写 JS，不能依赖模板内联脚本。
