如何使用jQuery/原生JS将多个同class DIV分组包裹到同一DIV中

不需要修改原有HTML代码，直接执行JS逻辑即可完成需求，你可以根据项目情况选择纯原生JS或者jQuery两种实现方式。

原生JavaScript实现 #

// 创建新的包裹容器
const wrapper = document.createElement('div');
wrapper.className = 'new-class';

// 获取所有class为a的目标div，转为静态数组避免DOM变动导致的节点集合异常
const targetDivs = Array.from(document.querySelectorAll('div.a'));

// 将包裹容器插入到第一个目标div的原有位置
targetDivs[0].parentNode.insertBefore(wrapper, targetDivs[0]);

// 把所有目标div依次移入新容器内
targetDivs.forEach(div => wrapper.appendChild(div));

逻辑说明：

• 先将获取到的节点集合转为静态数组，是因为原生返回的NodeList是动态集合，移动DOM节点时集合内容会实时变化，很容易出现元素遗漏问题，转成静态数组后可以规避这个bug
• 调用appendChild移动已存在的DOM节点时，浏览器会自动把节点从原有位置剪切到新位置，不需要额外手动删除原节点

jQuery实现 #

如果项目已经引入jQuery，可以直接用内置的wrapAll方法，代码更简洁：

$('div.a').wrapAll('<div class="new-class"></div>');

wrapAll是jQuery专门提供的批量包裹方法，会自动把所有匹配到的元素归集到第一个匹配元素的位置，外层统一包裹指定的DOM结构，不会破坏元素内部的原有内容。

两种方式执行完成后，生成的DOM结构和预期效果完全一致。

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