为何将元素子节点包裹进容器的JS代码无法正常工作？

为什么只包裹了一个子节点？ #

核心问题在于**childNodes是动态的NodeList集合**：当你调用appendChild(child)时，这个节点会被从原父元素（row）里移除，直接加到新容器newRow中。这会导致row.childNodes的长度实时缩短，而forEach遍历是基于初始的集合长度和顺序进行的，节点被移走后，后续的遍历指针会跳过原本的下一个节点，最终只处理了部分元素。

另外，childNodes还会包含文本节点（比如HTML里的换行、空格），这大概率不是你想要包裹的目标，也会干扰遍历结果。

修复方案 #

1. 把动态集合转成静态数组 #

先将childNodes转换成普通数组，这样遍历过程中集合不会因为节点移动而变化：

var homepageRows = document.querySelectorAll(".span-12 > *");

homepageRows.forEach(function(row){
    var newRow = document.createElement("div");
    newRow.className = "wrapper-row";

    // 转成静态数组再遍历，避免动态集合的坑
    Array.from(row.childNodes).forEach(function(child) {
       newRow.appendChild(child); 
    });
    row.append(newRow);
})

2. 只遍历元素节点（更精准） #

如果只想包裹<div>这类元素节点，用children代替childNodes（children只包含元素节点，不含文本/注释节点），同样转成数组遍历：

var homepageRows = document.querySelectorAll(".span-12 > *");

homepageRows.forEach(function(row){
    var newRow = document.createElement("div");
    newRow.className = "wrapper-row";

    Array.from(row.children).forEach(function(child) {
       newRow.appendChild(child); 
    });
    row.append(newRow);
})

3. 反向遍历（另类思路） #

从最后一个节点开始往前遍历，这样即使前面的节点被移走，也不会影响后续的遍历顺序：

var homepageRows = document.querySelectorAll(".span-12 > *");

homepageRows.forEach(function(row){
    var newRow = document.createElement("div");
    newRow.className = "wrapper-row";

    // 从后往前遍历，避开动态集合的问题
    for (let i = row.childNodes.length - 1; i >= 0; i--) {
        newRow.appendChild(row.childNodes[i]);
    }
    row.append(newRow);
})

效果验证 #

用上面任意一种方法修复后，每个.row.sqs-row里的子元素都会被完整包裹到.wrapper-row容器中，不会再出现遗漏。

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