在最后一個孩子之前追加

Question

我有一個帶有 ID 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 .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>');

Answer 3

這就是我到達那里的方式：

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

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

$(htmlString).insertBefore('.content div:last');

Answer 4

使用:last-of-type選擇最后一個元素並使用before()附加新元素：

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

 .new { color:red }

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

使用insertBefore ：

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

在目標之前插入匹配元素集中的每個元素。

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

Answer 6

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

Answer 7

您可以使用last()選擇最后一項，而before()用於附加

 $("#wrapper .content").last().before('<div class="content"><div class="subcontent">Some stuff</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 8

您可以使用 nth last child 來選擇倒數第二個 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/