使用jQuery添加html div

Question

这是我的html结构。我想用jQuery创建一个div。

<div class="main">
    <div class="main-1">
    </div>
    <div class="main-2">
    </div>
    <div class="main-3">
    </div>
</div>

我的预期输出将包含另一个带有class="main-1" and class="main-2"的div

它应该看起来像:-

<div class="main">
    <div class="newadd">
        <div class="main-1">
        </div>
        <div class="main-2">
        </div>
    </div>
    <div class="main-3">
    </div>
</div>

这里，newadd是需要添加的新类。我可以使用以下命令选择主div :-

jQuery(".main");

但是，我不确定如何在现有的div之间添加额外的div。

Answer 1

使用.wrapAll()：

​

$('.main .wrapMe').wrapAll("<div class='newadd' />")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="main-1 wrapMe">a
    </div>
    <div class="main-2 wrapMe">b
    </div>
    <div class="main-3">c
    </div>
</div>

​

Answer 2

用户wrapall

$('.main-1, .main-2,').wrapAll('<div class="newadd" />');

输出

<div class="main">
    <div class="newadd">
        <div class="main-1">
        </div>
   <div class="newadd">
        <div class="main-2">
        </div>
    </div>
    <div class="main-3">
    </div>
</div>