追加時不帶最后一個元素

Question

<div id="container">
    <div class="sub">a</div>

    <span id="add">add</span>
</div>            

$('#add').click(function(){
   $('#container').append('<div class="sub">a</div>');
})

此追加元素到底部的#container。 如何在沒有最后一個元素的情況下在底部添加此元素（#add）？ 我希望總是#add在底部。

小提琴： http ： //jsfiddle.net/nk67d/

Answer 1

使用.before() ，它將標記添加到匹配的元素之前。

$('#add').before('<div class="sub">a</div>');

完成答案：

$('#add').click(function(){
   $(this).before('<div class="sub">a</div>');
});

Answer 2

使用insertBefore（target） ;

$('<div class="sub">a</div>').insertBefore("#add");

您也可以使用before（）

Answer 3

使用.before()方法將div插入在添加按鈕之前

$('#add').click(function(){
   $(this).before('<div class="sub">a</div>');  
});

Answer 4

$('#add').click(function(){
   $(this).before('<div class="sub">a</div>');
})

此處演示

Answer 5

嘗試

$("#add").prepend('<div class="sub">a</div>');

參見小提琴： http : //jsfiddle.net/nk67d/1/

Answer 6

$('#add').click(function(){
    $('#container #add').before('<div class="sub">abcd</div>');
})