javascript - 添加到 div，但在第一个元素之后

Question

我需要.container在.controls（按钮）之后添加（最新的）新部门。可能吗？

注意：添加将在按钮下方保留前置控件的新部门对我来说不是一个选项。HTML 必须是完整的。

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

Answer 1

一种选择：

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

JS 小提琴演示。

还有一个：

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

JS 小提琴演示。

参考：

• appendTo().
• insertAfter().

Answer 2

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

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

Answer 3

这是一个演示

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