jQuery动态插入表格行位置异常（插入到表格外部）问题排查

使用Laravel框架开发时，需要在jQuery循环逻辑中逐次新增表格行。目前接口返回的字段值可以正常获取，但执行行插入操作时，新增的行被插入到了表格结构外部，需要定位代码问题。

• 表格HTML结构不合法：<table> 及其子元素有严格的嵌套规则，合法的直接子元素只能是 <caption>、<colgroup>、<thead>、<tbody>、<tfoot>、<tr>，<tr> 内部只能放 <td>/<th>。原代码里存在<tr> 嵌套 <tr>、在<tr> 内部放置<div>的错误写法，浏览器渲染时会触发自动容错修正，直接把不符合嵌套规则的<div>、错位的行元素移出表格结构，这是新增行跑到表格外的核心原因。
• JS变量声明语法错误：循环内写 var html += '<tr>'; 属于非法语法，+= 是对已声明变量的赋值操作符，首次定义变量时直接赋值即可，且原逻辑没有在每次循环时重置html变量，会导致拼接的内容持续累加。
• 插入目标选择错误：原逻辑把<tr>行元素往<div>中插入，而这个<div>本身已经被浏览器移出表格结构，插入的行自然不会出现在表格内。
• 标签拼接语法错误：拼接的div标签缺少闭合尖括号，代码里写的 <div class="tests'+[v+1]+'"</div> 少了属性结束的>，属于无效标签。

修正后的Blade模板 #

先把表格结构改成符合规范的写法，移除所有放在表格内部的div，修正嵌套错误的tr：

<table class="table table-borderless" id="myTable">
    <tbody>
        <tr>
            <td>Item</td>
            <td>Unit Price</td>
        </tr>
        <tr>
            <td>
                <span id="skuAndName0"></span>
            </td>
            <td id="orderItemUnitPrice0"></td>
        </tr>
    </tbody>
</table>

修正后的jQuery逻辑 #

放弃用div做插入锚点的写法，直接往表格的tbody中插入新行，修正变量声明和索引逻辑：

const orderItems = response[0].order_items;
// 填充首行默认存在的内容
if (orderItems.length > 0) {
    const firstItem = orderItems[0];
    $('#skuAndName0').html(firstItem.sku ? `${firstItem.sku}<br>${firstItem.name}` : firstItem.name);
    $('#orderItemUnitPrice0').text(firstItem.unitPrice);
}
// 从第二条数据开始循环插入新行
for (let v = 1; v < orderItems.length; v++) {
    const item = orderItems[v];
    // 每次循环重新初始化html变量，避免内容累加
    let rowHtml = `
        <tr>
            <td><span id="skuAndName${v}"></span></td>
            <td id="orderItemUnitPrice${v}"></td>
        </tr>
    `;
    // 直接将新行追加到表格tbody末尾
    $('#myTable tbody').append(rowHtml);
    // 填充当前新行的内容
    $(`#skuAndName${v}`).html(item.sku ? `${item.sku}<br>${item.name}` : item.name);
    $(`#orderItemUnitPrice${v}`).text(item.unitPrice);
}

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