在最后一个孩子之前追加

Posted 2023-03-11

【中文标题】在最后一个孩子之前追加

【英文标题】：Append before last child

【发布时间】：2015-07-16 07:14:59

【问题描述】：

我有一个 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>

我该怎么做？

【问题讨论】：

这是你想要的吗？ api.jquery.com/insertbefore

我会尝试做一个jsfiddle

@Boxiom 现在可以正常工作了吗？我刚刚更改了您的 div id 及其工作。

【参考方案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>

【参考方案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>');

【参考方案3】：

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

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

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

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

【参考方案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>

【参考方案5】：

使用insertBefore:

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

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

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

【参考方案6】：

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

【参考方案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>

【参考方案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>');
);

【参考方案9】：

你可以这样做

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

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

【讨论】：

这将作为孩子插入，而不是兄弟姐妹。

这将创建一个兄弟