前置div，但是在第一个元素之后

Question

我需要在我的.container之后添加（最新的）新分区，但在.controls之后（按钮）。有可能吗？

注意：在按钮下方添加新分区，其中包含 NOT 选项。 HTML需要完好无损。

小提琴：http://jsfiddle.net/MhRmy/

Answer 1

一个选项：

$(document).ready(function(){
    $('.add').bind('click', function(){
        $('<div />',{class: 'new-control'})
            .insertAfter($('.container .controls'));
    });
});​

JS Fiddle demo

另一个：

$(document).ready(function(){
    $('.add').bind('click', function(){
        $('<div />',{class: 'new-control'})
            .appendTo($('.container'));
    });
});​

JS Fiddle demo

参考文献：

• appendTo()。
• insertAfter()。

Answer 2

使用jQuery的after()方法添加元素作为给定元素的兄弟：

$(document).ready(function(){
  $('.add').bind('click', function(){
    $('.container .controls').after('<div class="new-control"></div>');
  });
});​

Answer 3

Here's a demo

$(function(){
    $('.add').on('click', function(){
        $('.controls').after('<div class="new-control"></div>');
    });
});​