原生JavaScript中模板字面量不自动更新DOM，需手动调用渲染函数；安全高效做法是用textContent+value+template.content.cloneNode(true)，禁用innerHTML以防XSS、状态丢失和重排卡顿。
原生 JavaScript 配合模板字面量能快速实现单向数据渲染，但它本身不构成“绑定”——数据变了，HTML 不会自动更新，必须手动调用渲染函数。想省事又保安全，就别直接拼 innerHTML，优先走 textContent + value + template.content.cloneNode(true) 这条路。
为什么不能直接用 template.innerHTML 填值？
template.innerHTML 永远是空字符串，这是规范行为。浏览器把 <template> 内容存进一个离线的 DocumentFragment，你得从 content 属性里取，再深克隆才能复用。
- 写
document.querySelector('template').innerHTML→ 返回""，啥也拿不到 - 写
template.textContent→ 拿到所有文本（含换行缩进），但没法当 DOM 节点操作 - 正确入口只有：
template.content.cloneNode(true)，不加true是浅克隆，input 光标、事件监听器全丢
模板字面量拼接 HTML 的坑在哪？
用 `<div>${data.name}</div>` 看着爽，但实际项目里容易踩三类硬伤：
- XSS 风险：用户输入没转义就塞进字符串，
${data.bio}里要是<script>alert(1)</script>，直接执行 - 结构脆弱：一旦模板里有
<input>或<select>，拼完字符串再设innerHTML，原有 value、checked、focus 状态全清零 - 性能卡顿：循环里反复设
container.innerHTML += htmlStr，每次都会触发重排重绘，100 条数据就明显卡
简单列表展示可以忍，表单交互或高频更新场景请绕道。
立即学习“Java免费学习笔记（深入）”；
如何安全高效地批量渲染列表？
核心是三步：克隆 → 填值 → 批量插入。关键不是“怎么写模板”，而是“怎么避免 DOM 频繁扰动”。
- 用
document.createDocumentFragment()当中转站，所有克隆节点先 append 到它里面 - 填纯文本内容，一律用
el.textContent = data.xxx，别碰innerHTML - 填表单控件，用
el.value = data.inputValue或el.checked = data.isActive - 最后只调一次
container.appendChild(frag)，浏览器只重排一次
示例片段：
const frag = document.createDocumentFragment();
users.forEach(user => {
const clone = userTemplate.content.cloneNode(true);
clone.querySelector('.name').textContent = user.name;
clone.querySelector('input').value = user.email;
frag.appendChild(clone);
});
listContainer.appendChild(frag);
什么时候该放弃原生，上框架？
当你开始写“监听 input 变更反向同步 data”“多个字段联动更新”“嵌套对象响应式”“条件+循环混合模板”时，说明你已经在重复造 Vue/React 的轮子了。
Object.defineProperty 或 Proxy 能做响应式，但要处理数组变异、嵌套深度、依赖收集、批量更新队列……这些复杂度远超一次列表渲染的需求。原生方案适合静态初始化 + 少量手动刷新，别硬撑双向绑定。
