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");

内容是主要div的ID

Answer 1

试试这个

JS代码

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

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

Answer 2

正如你的问题所说的那样。

你可以试试这个

$("div").on("click", function(){
    var  _this = $(this);
    var className = this.className;
    _this.after($('<div />').addClass(className).html("New Html"));

});

和<div class="divC" />DivC1 </div>应为<div class="divC">DivC1 </div>

快速查看 DEMO

Answer 3

user $（“你的div选择器”）。after（“new div element”）;

http://api.jquery.com/after/

Answer 4

试试这个。它应该给你完全（我希望）你想要的东西：

http://jsfiddle.net/zjcHf/1/

在他的父字段附近添加动态字段？

4 个答案: