JavaScript循环创建<tr>异常：如何正确生成表格行？

问题原因 #

每次通过 innerHTML += 分步拼接HTML时，浏览器会立刻尝试将这段不完整的代码解析为合法DOM结构。当你只添加 <tr> 而未闭合时，浏览器会自动补全 </tr>，导致后续的 <td> 被错误插入，最后再添加的 </tr> 无法对应到目标行，最终造成表格结构混乱。

最简修复方法 #

先在变量中构建完整的表格HTML字符串，最后一次性赋值给 innerHTML。这样浏览器会解析完整、结构正确的HTML，避免自动补全标签的问题，同时也能提升性能（减少DOM重绘次数）。

修改后的JS代码 #

function populateTable(){
    const letters = ["a", "b", "c", "d", "e"];
    const numbers = ["1", "2", "3", "4", "5"];
    let tableHtml = "";

    for(let i = 0; i < numbers.length; i++){
        tableHtml += "<tr>";
        for(let j = 0; j < letters.length; j++){
            tableHtml += "<td>" + letters[j] + numbers[i] + "</td>";
        }
        tableHtml += "</tr>";
    }

    document.getElementById("the-table").innerHTML = tableHtml;
}

内容的提问来源于stack exchange，提问作者Mofro