jquery - 在其父字段附近添加动态字段？

Question

在我的网页中，我使用 jQuery 添加动态字段功能。

我通过单击现有的 div 添加新的 div:

<div class="divA">divA1 </div> 
<div class="divB" >DivB1 </div>
<div class="divC" />DivC1 </div> 

通过单击父 div，我正在创建一个新的动态 div

<div class="divA">DivA2 </div>  

它出现在所有 div 的末尾。

<div class="divA">divA1 </div> 
<div class="divB" >DivB1 </div>
<div class="divC" />DivC1 </div>
<div class="divA">DivA2 </div>  

但我需要它与父 div 一起，如下所示:

<div class="divA">divA1 </div> 
<div class="divA">DivA2 </div> 
<div class="divB" >DivB1 </div>
<div class="divC" />DivC1 </div>

这是我的 jQuery 代码:

    newTextBoxDiv = $(document.createElement('div'))
     .attr("id", text).attr("class", 'test0 ' + text);
    newTextBoxDiv.html('<div style=" width:150px; class="DivA" float: left"> </div>'); 
}

newTextBoxDiv.appendTo("#contents");

contents is id of main div

Answer 1

试试这个

JS代码

 $('.divA').on('click', function(){
      $(this).after('<div/>').next().attr('class', 'divA2').text('divA2');
 });

演示:http://jsfiddle.net/mhn3q/11/