innerHTML 批量插入需一次性赋值完整HTML、严格转义用户输入、用事件委托绑定动态元素，并保留原容器属性。错误做法包括循环累加、未转义拼接、直接绑定事件或替换outerHTML。
element.innerHTML 是最直接的 DOM 批量插入方式，但动态生成带结构的列表时，容易因字符串拼接出错、HTML 转义缺失、事件绑定失效或 XSS 风险而翻车。别用 += 累加，也别在循环里反复赋值 innerHTML。
用模板字符串拼接完整 HTML 字符串再一次性赋值
多次修改 innerHTML 会触发多次重排重绘，性能差；而边循环边拼字符串（尤其用 +=）在大数据量下有明显性能退化。正确做法是先组装好整个 HTML 片段，最后只赋值一次。
常见错误：直接在循环中写 element.innerHTML += '<li>...' + item.name + '</li>' —— 这会导致每次执行都重新解析全部已有内容，DOM 树重建开销大。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
Array.map()生成li字符串数组，再用.join('')合并 - 所有动态内容必须通过
String(item.xxx).replace(/&/g, '&').replace(/, '<').replace(/>/g, '>')做基础转义（或用document.createTextNode()+textContent更安全，但此处不适用内嵌结构） - 避免在模板字符串中拼接未校验的用户输入，比如
item.comment直接插进<div>${item.comment}</div>可能执行 JS
示例：
const data = [{ id: 1, title: "第一项", status: "active" }];
const html = data.map(item =>
`<li class="item ${item.status}">
<span class="title">${String(item.title).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')}</span>
<button data-id="${item.id}">删除</button>
</li>`
).join('');
listElement.innerHTML = html;
给动态生成的按钮绑定事件必须用事件委托
用 innerHTML 插入的元素，在插入前并不存在，所以不能对它们直接调用 addEventListener。如果在插入后遍历 querySelectorAll('button') 再绑定，不仅冗余，还容易漏掉后续新增项。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在父容器（如
listElement）上监听click，用event.target.matches('button[data-id]')判断是否命中目标 - 不要依赖
onclick="del(${item.id})"内联 handler —— 污染 HTML、无法复用、作用域混乱、且item.id若含引号或特殊字符会直接破坏 HTML 结构 - 事件委托的 selector 尽量具体，比如用
button[data-id]而非泛泛的button，避免误触发
示例：
listElement.addEventListener('click', e => {
if (e.target.matches('button[data-id]')) {
const id = Number(e.target.dataset.id);
deleteItem(id); // 自定义删除逻辑
}
});
替换内容前保留原容器的 class 和属性
直接 element.innerHTML = newHtml 会清空整个子树，包括你手动添加的 class、data- 属性、已绑定的事件（即使没用委托）、或者第三方库挂载的实例（比如某个 textarea 上的 CodeMirror 实例）—— 这些都会被销毁。
使用场景：你只想更新列表项，但不想动 listElement 自身的 class="list list--compact" 或 data-loaded="true" 这类状态标记。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要用
element.outerHTML = '<ul class="...">...</ul>'—— 这会替换整个节点，丢失引用和事件监听器 - 确保只改
innerHTML，不碰element.className、element.dataset等 - 若需保留滚动位置，插入前读取
element.scrollTop，赋值后再尝试恢复（但注意 DOM 更新后高度可能变化，恢复不一定精准）
真正麻烦的不是拼 HTML，而是转义边界、事件生命周期和 DOM 状态残留 —— 这三点漏掉任一个，上线后都可能表现为点击无效、内容乱码或页面卡顿。
