JavaScript createElement与appendChild生成3列表格报错排查

• 开发需求：根据列表元素数量生成3列宽的表格展示所有列表项，HTML页面整体采用Grid布局
• 运行报错：Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild')
• 原有代码存在3个核心逻辑错误，逐一修复即可正常运行

1. 遍历逻辑错误：使用for...of遍历数组时，循环变量i拿到的是数组元素值（即"A"、"B"这类字符串），不是元素索引，因此i % 3 === 0的判断永远不会成立，无法按预期每3个元素新建一行
2. 变量使用错误：
   • 因为判断条件不成立，第一次循环时根本不会进入if块给idName赋值，此时idName为undefined，调用appendChild直接触发报错
   • 就算进入if块，idName被定义为字符串类型，字符串本身没有appendChild这个DOM方法；且字符串的concat方法不会修改原字符串，写idName.concat(i)不会改变idName的值
3. 挂载逻辑错误：新建表格行后，没有保存行元素的引用，后续无法把单元格挂载到对应行上

HTML部分（body标签内内容） #

<section id="db_gallery">
  <table id="gallery_table"></table>
  <script src="autogallery.js"></script>
</section>

基础CSS（实现Grid布局，可按需调整样式） #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#db_gallery {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 20px;
}
#gallery_table {
  border-collapse: collapse;
  width: 70%;
}
#gallery_table td {
  border: 1px solid #ddd;
  padding: 15px;
  text-align: center;
}

JS部分（autogallery.js内容） #

const gallery_table = document.getElementById("gallery_table");
// 后续对接phpMyAdmin数据库时，直接将后端返回的数据数组赋值给list即可
const list = ["A", "B", "C", "D", "E", "F"];
let currentRow; // 存储当前正在填充的表格行DOM对象

list.forEach((item, index) => {
  // 每3个元素新建一行：索引为0、3、6...时创建新行
  if (index % 3 === 0) {
    currentRow = document.createElement("tr");
    gallery_table.appendChild(currentRow);
  }
  // 创建单元格、填充内容、挂载到当前行
  const colItem = document.createElement("td");
  colItem.textContent = item;
  currentRow.appendChild(colItem);
})

代码说明：

• 用forEach遍历数组，同时拿到元素内容和索引，无需额外计算索引值，逻辑更简单
• 直接用变量存储当前行的DOM对象，不需要给行设置id再查找元素，减少DOM操作开销
• 对接数据库时，只需要把后端接口返回的数组替换掉示例中的list数组即可，不需要修改其他逻辑，不管数组有多少项都会自动按3列排版
• 如果需要表头单元格，把创建单元格的td标签换成th即可

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