Question

我有一个标识为wrapper的div，我正在使用.append()在该div的末尾插入一些内容，如下所示：

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

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

因此，如果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 > div:last').before('<div class="content"><div class="subcontent">Some stuff</div></div>');

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用@Override public void restoreState(Parcelable arg0, ClassLoader arg1) { //do nothing here! no call to super.restoreState(arg0, arg1); }：

insertBefore()

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

before()

Answer 3

使用:last-of-type选择最后一个元素并使用before()附加新元素：

＆＃13;

$('.content:last-of-type').before('<div class="new">test</div>');

＆＃13;

.new { color:red }

＆＃13;

<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>

＆＃13;

Answer 4

使用d == x - y：

insertBefore

在目标之前插入匹配元素集中的每个元素。

演示：http://api.jquery.com/insertBefore/

Answer 5

这就是我到达那里的方式：

http://jsfiddle.net/lharby/00tk6avg/

var htmlString = '<div class="content"><div class="subcontent">Some stuff</div></div>'


$(htmlString).insertBefore('.content:last-child');

Answer 6

$( "<p>Test</p>" ).insertBefore( "#wrapper > div:last-child" );

Answer 7

您可以 last() 选择最后一项，并 before() 进行追加

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 8

你可以使用第n个最后一个孩子来选择第二个最后一个div。小提琴： http://jsfiddle.net/08ta9wnL/

HTML：

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

的javascript：

$(document).ready(function(){
    $("#wrapper div:nth-last-child(2)").append('<div class="content"><div class="subcontent">Some stuff</div></div>');
});

Answer 9

你可以这样做

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

看看小提琴https://jsfiddle.net/48ebssso/

在最后一个孩子之前追加

9 个答案: