当前位置：首页 > 文章列表 > 文章 > 前端 > 如何用element.innerHTML动态生成包含简单结构的动态内容列表

如何用element.innerHTML动态生成包含简单结构的动态内容列表

2026-05-05 12:27:54 0浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《如何用element.innerHTML动态生成包含简单结构的动态内容列表》，聊聊，我们一起来看看吧！

innerHTML 批量插入需一次性赋值完整HTML、严格转义用户输入、用事件委托绑定动态元素，并保留原容器属性。错误做法包括循环累加、未转义拼接、直接绑定事件或替换outerHTML。

element.innerHTML 是最直接的 DOM 批量插入方式，但动态生成带结构的列表时，容易因字符串拼接出错、HTML 转义缺失、事件绑定失效或 XSS 风险而翻车。别用 += 累加，也别在循环里反复赋值 innerHTML。

用模板字符串拼接完整 HTML 字符串再一次性赋值

多次修改 innerHTML 会触发多次重排重绘，性能差；而边循环边拼字符串（尤其用 +=）在大数据量下有明显性能退化。正确做法是先组装好整个 HTML 片段，最后只赋值一次。

常见错误：直接在循环中写 element.innerHTML += '

...' + item.name + '

' —— 这会导致每次执行都重新解析全部已有内容，DOM 树重建开销大。

实操建议：

用 Array.map() 生成 li 字符串数组，再用 .join('') 合并
所有动态内容必须通过 String(item.xxx).replace(/&/g, '&').replace(/, '<').replace(/>/g, '>') 做基础转义（或用 document.createTextNode() + textContent 更安全，但此处不适用内嵌结构）
避免在模板字符串中拼接未校验的用户输入，比如 item.comment 直接插进 ${item.comment} 可能执行 JS

示例：

const data = [{ id: 1, title: "第一项", status: "active" }];
const html = data.map(item => 
  `

${String(item.title).replace(/&/g, '&').replace(/, '<').replace(/>/g, '>')}

` ).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); // 自定义删除逻辑
  }
});