jQuery循环拼接HTML时class为tests的tr标签未追加问题排查

遍历order_items的forEach循环中拼接HTML字符串时，预期在拼接内容末尾追加class名为tests的tr标签，但实际运行时该标签未成功渲染，问题代码如下：

order_items.forEach((element,v) => {

var html = '<input type="hidden" id="orderSku'+[v+1]+'" value="" >';
html += '<input type="hidden" id="orderName'+[v+1]+'" value="" >';
html += '<tr>';
html += '<td>';
html += '<div class="form-check" >';
html += '<input class="form-check-input shipMode'+[v+1]+'" id="shipModes" name="checkId" type="checkbox" >';
html += '</div>';
html += '</td>';
html += '<span id="skuAndName'+[v+1]+'"></span>';
html += '</td>';
html += '<td id="orderItemUnitPrice'+[v+1]+'"></td>';
html += '</tr>';
html += '<tr class="tests'+[v+1]+'"></tr> ';
});

• 变量作用域错误：html变量在循环内部用var声明，每轮循环都会重置变量值，根本不会累计拼接结果，循环结束后拿不到完整的HTML字符串，自然无法正常渲染全部内容。
• HTML结构非法：
  1. 两个隐藏<input>直接写在<tr>外层，表格元素的直接子节点只能是<thead>、<tbody>、<tr>、<tfoot>等表格专属标签，游离的input会被浏览器自动纠错处理
  2. 放置skuAndName的<span>标签前缺失<td>开标签，多写了一个</td>闭合标签，标签不匹配会触发浏览器的DOM自动修正逻辑，打乱你原本写的节点顺序，后续追加的tr很可能在纠错过程中被过滤或移位
• 类名不符合预期：你写的class是tests'+[v+1]+'，实际生成的类名是tests1、tests2这类带索引的值，不是纯tests，如果你的CSS/JS选择器写的是.tests，就算标签渲染了也匹配不到对应规则，会被误以为没渲染成功。

修正后的参考代码：

// 循环外初始化html变量，累计所有拼接内容
let html = '';
order_items.forEach((element,v) => {
  html += '<tr>';
  html += '<td>';
  // 隐藏input移到td内部，符合表格结构规范
  html += `<input type="hidden" id="orderSku${v+1}" value="" >`;
  html += `<input type="hidden" id="orderName${v+1}" value="" >`;
  html += '<div class="form-check">';
  // 复选框id加索引，保证页面id唯一
  html += `<input class="form-check-input shipMode${v+1}" id="shipModes${v+1}" name="checkId" type="checkbox" >`;
  html += '</div>';
  html += '</td>';
  // 补全缺失的td开标签
  html += '<td>';
  html += `<span id="skuAndName${v+1}"></span>`;
  html += '</td>';
  html += `<td id="orderItemUnitPrice${v+1}"></td>`;
  html += '</tr>';
  // 如果要使用tests类名就去掉索引拼接，需要索引区分就同步修改选择器
  html += '<tr class="tests"></tr>';
});
// 拼接完成后统一将HTML插入到表格对应的tbody节点中
// document.querySelector('table .target-tbody').innerHTML = html;

修复点说明：

• 将html变量声明移到循环外部，循环内只做字符串累加，所有内容拼接完成后统一插入DOM，避免每轮循环重置内容
• 修正所有非法表格结构：把游离的隐藏input放到单元格内，补全缺失的标签、删除多余的闭合标签，保证DOM结构完全符合规范，避免浏览器自动纠错打乱节点
• 核对类名规则：如果需要用.tests选择器就去掉类名后的索引拼接，需要按索引区分不同tr就同步修改对应的CSS、JS选择器
• 额外修复：给重复的复选框id加上索引后缀，保证页面id唯一，避免后续DOM选择出错

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