JavaScript同一函数中向动态新增<tr>添加<td>元素失败问题

你的代码核心问题是过度依赖DOM查询操作元素，且代码逻辑存在范围漏洞，导致后续单元格无法正常生成。直接调整代码逻辑，在创建每一行<tr>时就一次性生成所有需要的<td>和内部<span>，完全避免事后查询DOM的问题：

// 遍历姓名数组，逐行创建表格内容
namesArray.forEach(name => {
  const tr = document.createElement('tr');
  tr.className = "plan";
  
  // 创建姓名表头单元格
  const th = document.createElement('th');
  th.className = 'name';
  th.textContent = name;
  tr.appendChild(th);
  
  // 为当前行创建对应数量的日期单元格
  for(let i = 0; i < amountOfDates; i++) {
    const td = document.createElement('td');
    td.className = "class_plan";
    
    const span = document.createElement('span');
    span.className = "description";
    td.appendChild(span);
    
    tr.appendChild(td);
  }
  
  // 将整行添加到tbody中
  document.querySelector('tbody').appendChild(tr);
});

原代码失效原因 #

1. 逻辑范围错误：你在amountOfDates循环中只包裹了添加<td>的逻辑，而添加<span>的代码在循环外部，只会执行一次，后续循环生成的<td>不会被添加<span>。
2. DOM查询时机问题：频繁使用document.querySelectorAll查询刚添加的DOM元素时，浏览器可能还未完成渲染，导致无法识别新元素。

额外优化说明 #

• 用forEach遍历数组比for...in更安全，for...in会遍历对象原型链上的属性，不适合处理数组。
• 使用textContent设置文本内容，比innerHTML更安全（避免XSS风险）且性能更好。

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