如何使用jQuery为.parent div添加内部.subparent div并包裹子元素

原DOM结构 #

<div class="parent">
     <span>1</span>
     <span>2</span>
     <span>3</span>
</div>

目标DOM结构 #

<div class="parent">
     <div class="subparent">
          <span>1</span>
          <span>2</span>
          <span>3</span>
     </div>
</div>

下面是两种常用的实现方式：

原生JavaScript实现 #

无需依赖任何第三方库，直接用浏览器原生API即可完成：

// 获取目标父容器
const parentContainer = document.querySelector('.parent');
// 创建新的子容器并添加类名
const subParent = document.createElement('div');
subParent.classList.add('subparent');
// 获取父容器内所有的span元素
const spanElements = parentContainer.querySelectorAll('span');
// 将每个span移动到新的子容器里
spanElements.forEach(span => {
  subParent.appendChild(span);
});
// 最后把新容器加入到父容器中
parentContainer.appendChild(subParent);

jQuery实现 #

如果项目中已经引入jQuery，可以用更简洁的代码实现：

$('.parent').wrapInner('<div class="subparent"></div>');

wrapInner()方法会直接把选中元素的所有子内容（包括文本和子元素）包裹到指定的HTML结构中，完全匹配需求。

内容的提问来源于stack exchange，提问作者Tiến Hoàng