innerHTML和createElement哪个快？表格操作中的真实对比

做网页开发时，经常要往页面里加内容，尤其是在处理表格的时候。比如你从后台拿到一组数据，想快速展示成一个表格。这时候，很多人会纠结：用 innerHTML 还是 createElement 更合适？哪个更快？

实际场景：动态生成一个学生名单表格

假设你要把 100 个学生的姓名、年龄、班级插入到一个表格中。你会怎么写？

一种方式是拼接字符串，用 innerHTML 一次性塞进去：

const table = document.getElementById('studentTable');
let html = '<tbody>';

for (let i = 0; i < 100; i++) {
  html += `<tr><td>张三${i}</td><td>${18 + i % 5}</td><td>高三${i % 10}</td></tr>`;
}

html += '</tbody>';
table.innerHTML = html;

另一种是用 createElement 一个个创建元素，再 append 进去：

const table = document.getElementById('studentTable');
const tbody = document.createElement('tbody');

for (let i = 0; i < 100; i++) {
  const tr = document.createElement('tr');
  const td1 = document.createElement('td');
  const td2 = document.createElement('td');
  const td3 = document.createElement('td');

  td1.textContent = `张三${i}`;
  td2.textContent = `${18 + i % 5}`;
  td3.textContent = `高三${i % 10}`;

  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3);
  tbody.appendChild(tr);
}

table.appendChild(tbody);

速度对比：innerHTML 通常更胜一筹

在大多数情况下，innerHTML 的执行速度比 createElement 快。原因很简单：JavaScript 操作 DOM 是慢的，而 innerHTML 通过字符串拼接，只触发一次 DOM 更新，浏览器可以一次性解析并渲染整个 HTML 片段。

相反，createElement 在循环里不断调用 document.createElement 和 appendChild，每一步都在操作 DOM，相当于跑了 100 多趟“快递”，自然更耗时。

但 innerHTML 也有坑

别急着全用 innerHTML。它虽然快，但容易被 XSS 攻击盯上。如果数据来自用户输入，比如评论列表、用户名，直接 innerHTML 可能执行恶意脚本。

另外，innerHTML 会清空原内容再重写，如果你之前绑定了事件或有其他状态，就全丢了。createElement 更“干净”，控制力更强，适合复杂交互。

表格场景下的建议

如果是静态数据展示，比如导出报表、加载配置表，优先考虑 innerHTML，速度快，代码也简洁。

但如果表格需要频繁更新某一行，或者要绑定点击事件，createElement 或现代框架（如 Vue、React）的方式更稳妥。

还有一个折中办法：用 DocumentFragment 先构建内容，最后一次性插入，兼顾性能和安全。