循环创建6行HTML表格失败，请问我遗漏了什么？

嘿，我一眼就瞅出你代码里的问题啦！

你现在只创建了一个<tr>元素，然后在for循环里反复调用tbody.appendChild(tr)——但DOM元素是引用类型的对象，每次调用appendChild并不是复制这个元素，而是把它从当前所在的位置（第一次调用时它还没在DOM里，之后每次都是之前的位置）“移动”到tbody里。所以最后你看到的只会是1行，因为本质上你一直在操作同一个<tr>元素。

修正后的代码 #

<script>
var table = document.createElement('table');
var tbody = document.createElement('tbody');
document.body.appendChild(table);
table.appendChild(tbody);

for (var i = 0; i < 6; i++) {
  // 把<tr>的创建放到循环内部，每次生成新的行元素
  var tr = document.createElement('tr');
  // 如果需要单元格的话，也在这里创建并添加到行里
  var td = document.createElement('td');
  td.textContent = `第${i+1}行`; // 给单元格加个文本方便看效果
  tr.appendChild(td);
  
  tbody.appendChild(tr); // 现在每次添加的都是新的<tr>
}
</script>

关键说明 #

• 必须在循环内部创建<tr>（以及每个行里的<td>），这样每次循环都会生成一个全新的DOM节点实例，而不是重复操作同一个节点。
• 如果你需要给每行添加多个单元格，只需要在循环里再套一层循环来创建多个<td>即可。

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