如何使用原生JavaScript（非jQuery）包裹同class的相邻元素？

当然可以用原生JavaScript实现完全相同的效果，下面是和jQuery逻辑对齐的原生实现：

原生JavaScript代码 #

const codeBlocks = document.querySelectorAll('.codeblock');
let currentGroup = [];

// 遍历所有codeblock元素进行分组
for (const block of codeBlocks) {
  const prevSibling = block.previousElementSibling;
  // 判断当前元素是否是新分组的起始点
  if (!prevSibling || !prevSibling.classList.contains('codeblock')) {
    // 处理上一个分组（如果存在）
    if (currentGroup.length) {
      wrapElements(currentGroup);
    }
    // 开启新分组
    currentGroup = [block];
  } else {
    // 将当前元素加入当前分组
    currentGroup.push(block);
  }
}

// 处理最后一个分组
if (currentGroup.length) {
  wrapElements(currentGroup);
}

// 封装分组包裹逻辑
function wrapElements(elements) {
  const container = document.createElement('div');
  container.classList.add('contentBox');
  // 将分组内的元素依次移入容器
  elements.forEach(el => container.appendChild(el));
  // 将容器插入到分组第一个元素原本的位置
  elements[0].parentNode.insertBefore(container, elements[0]);
}

逻辑说明 #

这个实现和你提供的jQuery代码逻辑完全一致：

1. 先定位所有.codeblock元素
2. 识别每一组连续.codeblock的起始元素（前一个兄弟不是.codeblock或没有前兄弟）
3. 收集同一组内的所有连续.codeblock
4. 创建contentBox容器，将分组元素移入后插入到DOM原位置

对比你的尝试 #

你之前用nextElementSibling的思路没问题，这里的实现其实是把分组逻辑做了封装，代码结构更清晰，和jQuery方案的代码量差距并不大，而且完全脱离了jQuery依赖。

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