请求排查JS动态创建HTML表格的代码失效原因

安全阿岳

2026-5-28

动态表格渲染失效的问题排查

我来帮你排查这段代码失效的核心原因，直接看问题所在：

代码失效的关键原因

你在JS代码里给innerHTML赋值时，所有HTML标签都用了<和>这类HTML实体转义字符，但innerHTML会把这些实体解析成普通文本，而不是当作HTML标签来渲染。这就导致浏览器根本没有生成<table>、<tr>、<td>这些表格结构元素，只是把所有内容当成纯文本堆在一起，所以才会出现S.no title 1ssss2bbbb这种混乱的输出。

另外还有个小细节：你多次调用innerHTML += ...，每次拼接都会触发DOM重绘，虽然不是这次失效的直接原因，但会影响性能，建议一次性拼接完所有HTML再赋值。

你的原始代码

带问题的JS代码

let data = [{ id: 1, name: 'ssss' }, { id: 2, name: 'bbbb' } ] 
document.getElementById("test").innerHTML = `&lt;table&gt;&lt;tr&gt;&lt;th&gt;S.no&lt;/th&gt;&lt;th&gt;title&lt;/th&gt;&lt;/tr&gt;`; 
data.forEach(item => { 
  document.getElementById("test").innerHTML += "&lt;tr&gt;&lt;td&gt;" + item.id + "&lt;/td&gt;&lt;td&gt;" + item.name + "&lt;/td&gt;&lt;/tr&gt;"; 
  console.log(item); 
}); 
console.log("ssss"); 
document.getElementById("test").innerHTML += "&lt;/table&gt;";

HTML代码

<p id="test"> </p>

修复后的代码

把所有<替换成<、>替换成>，同时优化成一次性拼接字符串减少DOM操作：

优化后的JS代码

let data = [{ id: 1, name: 'ssss' }, { id: 2, name: 'bbbb' }];
// 先拼接完整的表格HTML字符串
let tableHtml = '<table><tr><th>S.no</th><th>title</th></tr>';
data.forEach(item => {
  tableHtml += `<tr><td>${item.id}</td><td>${item.name}</td></tr>`;
  console.log(item);
});
tableHtml += '</table>';
// 一次性赋值给容器，减少DOM重绘
document.getElementById("test").innerHTML = tableHtml;
console.log("ssss");