HTML中template列表渲染 HTML中template标签结合原生JS

HTML中template列表渲染：HTML中template标签结合原生JS

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

先明确一个核心概念：template标签本身在浏览器里是“隐身”的。它不渲染、不执行、也不做任何数据绑定，本质上就是一个离线的结构仓库。想用它来实现列表渲染？必须依靠Ja vaScript手动完成克隆、填充数据和插入DOM这三步。直接在template里写for循环或者类似{{name}}的插值语法是完全无效的，浏览器会原封不动地忽略它们。

为什么说template.content.cloneNode(true)是唯一可靠的入口？

很多人第一步就卡住了：试图用document.querySelector('template').innerHTML来获取内容，结果却拿到一个空字符串。问题出在哪？原来，template标签的真实内容被浏览器封装在一个叫做DocumentFragment的容器里，只有通过其content属性才能访问到。

• template.innerHTML永远为空，这个属性根本用不上。
• template.textContent倒是能返回所有文本（包括换行和缩进），但你无法用它来操作DOM结构。
• 所以，必须走template.content.cloneNode(true)这条路。这是获取可操作节点副本的唯一正确方式，否则后续所有操作都将失效。
• 这里有个关键细节：cloneNode方法的参数必须是true，表示深度克隆。如果用了false或省略，只会克隆模板节点本身，其所有子元素、事件监听器、表单状态（比如input的光标位置）都会丢失。

填充数据时，请对innerHTML保持警惕

拿到克隆节点后，下一步是填充数据。这时候，innerHTML是一个需要谨慎使用的工具。直接用字符串拼接赋值，等于主动打开了XSS（跨站脚本攻击）的风险大门。更隐蔽的问题是，它会销毁目标元素内已有的DOM结构，如果克隆的模板里原本有带事件监听的button，这些监听器也会一并被清除。

• 纯文本内容：优先使用textContent。例如：el.querySelector('.title').textContent = data.title。
• 表单控件值：对于input、textarea等，应该设置value属性，而不是textContent。例如：el.querySelector('input').value = data.value。
• 如果内容确实包含需要保留的HTML结构怎么办？务必先对用户输入进行转义处理（例如将&转换为&），然后再赋值给innerHTML。
• 另外请注意，即使模板里包含了