如何使用jQuery在父容器内部添加子父级容器

你之前使用的wrap()方法会将选中的.my-parent元素整体包裹在新创建的容器外部，这就是为什么子父级容器出现在父容器外面的原因。要实现内部嵌套的目标，你需要操作父容器的内部内容，而非父容器本身。

方法1：使用wrapInner()（最简单的方式） #

wrapInner()方法会将选中元素的所有内部子元素包裹在指定的HTML结构中，完全匹配你的需求：

$('.my-parent').wrapInner('<div class="my-sub-parent"></div>');

完整可运行代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-parent">
    <div class="child-items">1</div>
    <div class="child-items">2</div>
    <div class="child-items">3</div>
    <div class="child-items">4</div>
</div>

<script>
$('.my-parent').wrapInner('<div class="my-sub-parent"></div>');
</script>

方法2：手动创建并移动元素（适合复杂场景） #

如果需要更灵活的操作（比如先处理子元素再嵌套），可以分步实现：

// 1. 创建新的子父级容器
const subParent = $('<div class="my-sub-parent"></div>');
// 2. 将.my-parent下的所有子元素移动到新容器中
$('.my-parent').children().appendTo(subParent);
// 3. 将新容器添加回.my-parent内部
$('.my-parent').append(subParent);

最终效果 #

执行上述任意一种方法后，你会得到期望的HTML结构：

<div class="my-parent">
    <div class="my-sub-parent">
        <div class="child-items">1</div>
        <div class="child-items">2</div>
        <div class="child-items">3</div>
        <div class="child-items">4</div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者laurence keith albano