✅ 正确做法是避免混合使用 DOM 方法与 innerHTML 字符串拼接。推荐统一采用字符串追加方式，并确保 ID 唯一：

  

    

      
Table Head
      

    
  
  


Click to add a table row

let idCounter = 0;
const btnAdd = document.querySelector("#add");
btnAdd.addEventListener("click", () => {
  const tbody = document.getElementById("tbody");
  tbody.innerHTML += `
    
      Table row ${idCounter + 1}
    
  `;
  idCounter++;
});

? 关键要点说明：

• ID 必须唯一：多次点击会生成多个 ，因此使用递增计数器（如 tablerow0, tablerow1）保证每个 ID 全局唯一；若只需样式控制，建议改用 class="tablerow" 更符合规范。
• 禁用内联事件处理器：onclick="add()" 违反关注点分离原则，且难以维护和调试；应使用 addEventListener 进行解耦绑定。
• 语义化优先： 标签用于导航，触发行为应使用 ，既提升可访问性（无障碍支持），也更符合 HTML5 语义规范。
• 性能提醒：对 innerHTML += 频繁操作大型表格可能引发重排重绘，如需高性能批量插入，可考虑 documentFragment 或 insertAdjacentHTML('beforeend', ...) 替代。

最后，CSS 选择器可无缝适配动态 ID：

#tablerow0 { background: #ffeb3b; }
#tablerow1 { background: #4caf50; }
/* 或更通用的类选择器 */
.tablerow { transition: background 0.2s; }

通过以上改进，你不仅能成功为每行赋予可定位、可样式的唯一 ID，还能写出更健壮、可维护、符合现代 Web 标准的表格操作逻辑。