jQuery动态追加行div时切换目标容器的实现问题求助

问题核心原因 #

你对after()方法的理解有误：Element.after()的作用是在当前元素的外侧后方插入同级节点，并不是在当前元素内部添加子元素。另外循环中反复修改innerHTML会频繁触发DOM重绘，也会导致你维护的DOM引用容易失效。

修正后代码 #

$("#search").click(function(event){
    var e = document.getElementById("lineDesc");
    var line = e.options[e.selectedIndex].text;
    var month = document.getElementById("descMonth").value;
    var desc = $("#lineDescAr").val();
    // 提前获取表格容器，后续不用修改这个引用
    var searchTab = document.getElementById("searchtab");
    let fd = new FormData();
    fd.set('line', line);
    fd.set('month', month);
    fd.set('desc', desc);

    fetch('search.php',{method:'POST',body: fd})
        .then( r=> r.json())
        .then( json=>{
            // 先清空容器原有内容
            searchTab.innerHTML="";
            Object.keys( json ).forEach( key=>{
                let obj=json[ key ];
                var description = obj.description;
                // 新建行节点
                let newRow = document.createElement('div');
                newRow.className = 'row';
                // 拼接当前行所有单元格
                let cellHtml = `
                <div class="cell" onclick='showDesc("${description}")'>${obj.line}</div>
                <div class="cell" onclick='showDesc("${description}")'>${obj.scanner}</div>
                <div class="cell" onclick='showDesc("${description}")'>${obj.fault}</div>
                <div class="cell" onclick='showDesc("${description}")'>${obj.duration}</div>
                <div class="cell" onclick='showDesc("${description}")'>${obj.date}</div>
                `;
                newRow.innerHTML = cellHtml;
                // 把整行追加到表格容器末尾
                searchTab.appendChild(newRow);
            })
        })
    event.preventDefault();
});

主要修改点 #

• 固定了表格容器#searchtab的引用，不需要在循环中动态切换DOM指针，避免引用混乱
• 每次循环先创建独立的.row行节点，所有单元格内容拼接完成后再一次性插入DOM，大幅减少重绘次数
• 移除了冗余的计数器和动态id逻辑，代码更简洁，也避免了动态id拼接可能出现的语法错误
• 改用模板字符串拼接HTML，代码可读性更高，也不用手动处理引号转义问题

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