logo标签列表

在最后一个子元素之前添加

javascriptjqueryhtmlappend
28
我有一个带有ID为wrapper的
，我正在使用.append()将一些内容插入到该
的末尾，代码如下：
$("#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>

我该如何做到这一点？

1
这是你想要的吗？http://api.jquery.com/insertbefore/ - lharby
1
我会尝试创建一个 jsfiddle。 - lharby
@Boxiom现在工作了吗？我刚刚更改了您的div id并且它正在工作。 - Jaimin Soni
9个回答
43

你可以使用.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>

9
您可以使用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
这是我到达那里的方式： 点击这里 
var htmlString = '<div class="subcontent">Some stuff</div>';

$(htmlString).insertBefore('.content div:last');
2
使用 :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>

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

在目标元素之前插入匹配元素集中的每个元素。
演示：http://api.jquery.com/insertBefore/
1

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

$("#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>

0

你可以使用nth-last-child选择倒数第二个div。 fiddle: 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>');
});
0
$( "<p>Test</p>" ).insertBefore( "#wrapper > div:last-child" );
0

你可以这样做：

$("#wrapper .content:last").before("<div class="content"><div class="subcontent">一些内容</div></div>");

查看 fiddle https://jsfiddle.net/48ebssso/

这将作为一个子节点插入，而不是兄弟节点。 - Scimonster
这将创建一个兄弟节点。 - Ritu Gupta
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接