如何将两个指定div之间的内容用新div包裹并移除原内容？

兄弟我太懂你这困扰了！浏览器自动闭合HTML标签的特性真的坑死人，你直接插半拉<div>标签根本行不通，而且之前用nextUntil()没生效，是因为它默认只抓元素节点，漏掉了文本和换行这些内容，难怪只处理到第一个<br>就拉倒了。

我给你两种靠谱的解决方案，分别用jQuery和原生JavaScript，都能完美把div_1和div_2之间的所有内容（包括元素、纯文本、换行这些）包裹到div_3里，还能自动移除原内容：

方案一：用jQuery实现 #

核心思路是先找到父容器里所有在div_1之后、div_2之前的节点（包括文本节点），再用wrapAll把它们统一包裹起来：

$(document).ready(function() {
  // 获取div_1的父容器
  const parent = $('#div_1').parent();
  // 筛选出父容器中，在div_1之后且在div_2之前的所有节点
  const targetNodes = parent.contents().filter(function() {
    const isAfterDiv1 = $(this).prevAll('#div_1').length > 0;
    const isBeforeDiv2 = $(this).nextAll('#div_2').length > 0;
    return isAfterDiv1 && isBeforeDiv2;
  });
  // 把筛选到的所有节点包裹进div_3
  targetNodes.wrapAll('<div id="div_3"></div>');
});

方案二：用原生JavaScript实现 #

这个方法更直观，直接逐个移动节点到新创建的div_3里，完全绕开浏览器自动闭合标签的问题：

document.addEventListener('DOMContentLoaded', function() {
  const div1 = document.getElementById('div_1');
  const div2 = document.getElementById('div_2');
  const parent = div1.parentNode;
  
  // 创建新的div_3
  const div3 = document.createElement('div');
  div3.id = 'div_3';

  // 从div1的下一个节点开始遍历，直到碰到div2为止
  let currentNode = div1.nextSibling;
  while (currentNode && currentNode !== div2) {
    // 先保存下一个节点（因为appendChild会把节点从原位置移除）
    const nextNode = currentNode.nextSibling;
    // 把当前节点移到div3里
    div3.appendChild(currentNode);
    currentNode = nextNode;
  }

  // 把div3插入到div2的前面
  parent.insertBefore(div3, div2);
});

为啥你之前的方法行不通？ #

1. 直接插入半拉标签：浏览器的HTML解析器强制要求标签闭合，你插入<div id="div_3">时，它会自动补全</div>，所以才会出现空的div_3。
2. nextUntil('#div_2')的问题：jQuery的nextUntil默认只匹配元素节点，像纯文本、换行这类非元素节点会被直接忽略，所以才只处理了第一个<br>就停止了。

备注：内容来源于stack exchange，提问作者ACKmiecik