如何将两个div之间的内容包裹在另一个div中

我已经查阅过以下内容，但均无法解决需求，推测div元素的特性是问题根源：

• Wrap plain text in paragraph Jquery
• Wrap text within element
• Wrap element between two elements in JavaScript/jQuery?
• jQuery wrapAll contents including text between two tags
• Get the text after span element using jquery

需求说明 #

需要将div_1和div_2之间的所有内容（包括元素和纯文本）包裹到div_3中，原始结构如下：

<div id="div_1"></div>
<strong>stuff here that always begins with same string but does not end that way</strong>
some unknown text here
<div id="div_2"></div>

遇到的问题 #

尝试手动插入起始标签和闭合标签时，jQuery会自动闭合新创建的div，导致无法包裹中间内容。示例代码：

$(document).ready(function(){
$('#div_1').after('<div id="div_3">');
$('#div_2').before('</div>');
});

执行后生成的错误结构：

<div id="div_1"></div>
<div id="div_3"></div>
    <strong>stuff here that always begins with same string but does not end that way</strong>
    some text here with no consistent string
    <div id="div_2"></div>

正确实现方法 #

方法1：使用jQuery的nextUntil + wrapAll #

利用nextUntil选中div_1之后到div_2之前的所有兄弟节点（包括文本节点），再用wrapAll统一包裹：

$(document).ready(function() {
  $('#div_1').nextUntil('#div_2').wrapAll('<div id="div_3"></div>');
});

方法2：原生JavaScript实现 #

如果不依赖jQuery，可以直接操作DOM节点完成包裹：

document.addEventListener('DOMContentLoaded', function() {
  const div1 = document.getElementById('div_1');
  const div2 = document.getElementById('div_2');
  const div3 = document.createElement('div');
  div3.id = 'div_3';
  
  let currentNode = div1.nextSibling;
  // 遍历div1之后的所有节点，直到div2为止
  while (currentNode && currentNode !== div2) {
    const nextNode = currentNode.nextSibling; // 提前存储下一个节点，避免移动后丢失引用
    div3.appendChild(currentNode);
    currentNode = nextNode;
  }
  
  // 将div3插入到div1的后面
  div1.insertAdjacentElement('afterend', div3);
});

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