如何用Vanilla JS将每两个<li>元素包裹到<div>中？代码排查求助

DevOps 小满

2026-8-1

问题排查与修正

原代码存在的核心错误：

items.slice(i, i += 4)：这行逻辑完全错误，i +=4会直接修改循环变量，导致每次循环i额外增加4（叠加原循环的i+=2，实际步长变成6），且slice返回的分组数组未被保存，属于无效操作。正确分组应该是items.slice(i, i+2)并赋值给变量。
items.parentNode：items是DOM元素数组，并非单个DOM节点，不存在parentNode属性，应直接获取<ul>元素作为父容器。
wrapper.appendChild(items)：appendChild仅支持单个DOM节点参数，不能直接传入数组，需用append(...group)批量添加节点，或遍历分组元素逐个添加。
插入逻辑错误：原代码试图将wrapper插入到数组items前，这完全不符合DOM操作规则，应将wrapper插入到当前分组第一个li的原位置。

修正后的代码：

const ul = document.querySelector('ul');
const items = [...document.querySelectorAll('ul li')];

for (let i = 0; i < items.length; i += 2) {
    // 截取当前组的2个li元素
    const group = items.slice(i, i + 2);
    const wrapper = document.createElement('div');
    // 将当前组的li批量添加到div中
    wrapper.append(...group);
    // 将div插入到ul中对应位置
    ul.insertBefore(wrapper, group[0]);
}