如何用JavaScript将指定div元素放入对应的主div容器内

算力阿峰

2026-10-5

实现方案

原理解释

你之前用CSS :nth-child 无法实现的原因是CSS仅能修改元素样式，不能调整DOM节点的层级和所属父容器，该需求属于DOM结构修改，必须通过JS实现。

操作逻辑

先获取到所有.sub元素、.main容器、.main2容器
遍历所有.sub元素，JS中数组默认从0开始索引，你要求的「2n-1（从1计数的奇数位）」对应索引为偶数的元素，「2n（从1计数的偶数位）」对应索引为奇数的元素
按规则将元素插入对应目标容器即可，appendChild API会自动将元素从原父节点移除，无需额外删除操作

完整代码

// 获取目标DOM节点
const main = document.querySelector('.main');
const main2 = document.querySelector('.main2');
const subList = document.querySelectorAll('.sub');

// 遍历分类插入
subList.forEach((subItem, index) => {
  if (index % 2 === 0) {
    // 索引0对应第1个sub，匹配2n-1规则，放入main
    main.appendChild(subItem);
  } else {
    // 索引1对应第2个sub，匹配2n规则，放入main2
    main2.appendChild(subItem);
  }
});