jQuery AJAX 動態追加表格：after()/before() 精準插入指定位置

場景

購物車頁面，AJAX 獲取 JSON 商品數據，需將生成的表格行（<tr>）插入到現有表格 #main_table 的特定位置，而非單純 append 到末尾。

核心解法：使用 .after() 或 .before()

jQuery 提供精準的 DOM 插入方法：

• $(target).after(html)：在目標元素**之後**插入（同級下一個）。
• $(target).before(html)：在目標元素**之前**插入（同級上一個）。

實戰代碼模式

success: function(data) {
    var $table = $("#main_table");
    var $lastRow = $table.find("tr:last");  // 目標參考行，如最後一行

    $.each(data, function(index, item) {
        var rowHtml = "<tr>" +
            "<td><input type='checkbox' name='newslist' id='newslist-" + (index+1) + "'></td>" +
            "<td><a href='#'><img src='" + item.lj + "'></a></td>" +
            "<td><a href='#'>" + item.xh + "</a></td>" +
            "<td>" + item.ms + "</td>" +
            "<td><span id='text_box" + (index+1) + "'>" + item.sl + "</span></td>" +
            "<td><label id='total" + (index+1) + "' class='tot' style='color:#ff5500;font-weight:bold;'>" + item.je + "</label></td>" +
            "<td><a href='#' class='delete-btn'>刪除</a></td>" +
            "</tr>";

        // 關鍵：插入到最後一行之後，保持表頭不變
        $lastRow.after(rowHtml);
        // 更新參考行為新插入的行，實現順序追加
        $lastRow = $lastRow.next();
    });

    // 事件委託綁定動態生成的刪除按鈕
    $table.on("click", ".delete-btn", function() {
        $(this).closest("tr").remove();
    });
}

關鍵技巧總結

1. 參考節點動態更新：每次 after 後將 $lastRow 指向新行，實現批量有序插入。
2. 事件委託：動態生成的元素綁定事件必須用 .on() 委託給靜態父容器（如 #main_table）。
3. HTML 字串拼接：使用模板字串（ES6）或陣列 join 提升可讀性與效能。
4. 避免 async: false：同步請求會阻塞主線程，改用 Promise/async-await 或回調鏈處理後續邏輯。

替代方案：appendTo + detach 重排

若插入位置極其複雜（如按排序插入），可先生成所有行 <tr> 到一個 DocumentFragment 或離屏 <div>，排序後一次性 appendTo(tbody)，減少重繪。

掌握 after/before，讓 AJAX 渲染不再局限於「只能加在尾巴上」。