Javascript 在最后一个孩子之前追加

Append before last child

提问by Boxiom

I have a div with the ID wrapper, and I am using .append()to insert some content at the end of that div, like this:

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

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

However, I also want the option to insert a new child beforethe last contentdiv in the wrapper.

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

So if the HTML output looks like this:

因此，如果 HTML 输出如下所示：

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

I want to insert an element before the last one, so I get this:

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

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

How would I do this?

我该怎么做？

回答by Scimonster

You could use .before()to add a sibling before the element:

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

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

.insertBefore()does the same thing with a different syntax, namely that you select the element to be added, and pass the element you want to add it before.

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

回答by Rory McCrossan

You can use insertBefore():

您可以使用insertBefore()：

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

Or before():

或者before()：

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

回答by kapantzak

Select the last element with :last-of-typeand use before()to append the new element:

选择最后一个元素 with: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>

回答by Tushar

Use insertBefore:

使用insertBefore：

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

Insert every element in the set of matched elements before the target.

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

Demo: http://api.jquery.com/insertBefore/

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

回答by lharby

This is how I got there:

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

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

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

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


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

回答by man_luck

you can use nth last child to select the second last div. fiddle: http://jsfiddle.net/08ta9wnL/

您可以使用 nth last child 来选择倒数第二个 div。小提琴：http: //jsfiddle.net/08ta9wnL/

html:

html：

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

javascript:

javascript:

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

回答by Ritu Gupta

You can do like this

你可以这样做

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

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

Have a look at fiddle https://jsfiddle.net/48ebssso/

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

回答by Pranav C Balan

You can last()for selecting last item, and before()for appending

您可以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>

回答by braks

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