在最后一个孩子之前追加

Question

我有一个带ID的div wrapper,我.append()用来在div的末尾插入一些内容,如下所示:

$("#wrapper").append('<div class="content"><div class="subcontent">Some stuff</div></div>');

但是,我还希望选择在包装器中的最后一个div 之前插入一个新子content节点.

因此,如果HTML输出如下所示:

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

我想在最后一个元素之前插入一个元素,所以我得到了这个:

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Third
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

我该怎么做？

Answer 1

您可以使用.before()在元素之前添加兄弟:

$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');

.insertBefore() 使用不同的语法执行相同的操作,即选择要添加的元素,然后传递要添加的元素.

$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

Answer 2

您可以使用insertBefore()：

$('<div class="content"><div class="subcontent">Some stuff</div></div>').insertBefore('#wrapper > div:last');

或者before()：

$('#wrapper > div:last').before('<div class="content"><div class="subcontent">Some stuff</div></div>');