使用 jquery 和 javascript 添加新的 div

Question

Now I try to add new Div with this code it's work.
The Problem is when I try to add new Div in a lasted row. It's always after lasted row.
I need to add new Div next to the last row.

Maybe it's because of insertAfter but I can't fix it.

var math = Math.random().toString(36).substr(2, 9);  
var math2 = Math.random().toString(36).substr(2, 9);  

$(document).ready(function(){

     $('<div class="row mt-2"" id="rowExpression'+math+'"></div>').appendTo('#overall');
     $('<div class="col-md-9" id="Selector'+math+'"></div>').appendTo('#rowExpression'+math);
     $('<h5> e '+math+'</h5>').appendTo('#Selector'+math);
     $('<div class="col-md-1 col-md-offset-2" id="CRUDExpression'+math+'"></div>').appendTo('#rowExpression'+math);
     $('<i class="btn success-item fas fa-plus-circle pr-1" onclick="addRow(this)" id="'+math+'" ></i>').appendTo('#CRUDExpression'+math);
     $('<i class="btn cross-item fas fa-minus-circle pl-1" onclick="deleteRow(this)" id="'+math+'" ></i>').appendTo('#CRUDExpression'+math);


    }); 


function addRow(eId) {

     var mathX = Math.random().toString(36).substr(3, 12);

     $('#rowExpression'+eId.id).one( "click",function(){
         var x = $(this).prev().attr('id');

     console.log(x +'                neastest div');
     console.log(eId.id +'                    this id');
     console.log(mathX +'                     new id');

     var lastedId = $('.row').last().attr("id") ;
     console.log(lastedId, "rowExpression"+mathX);

     $('<div class="row mt-2"" id="rowExpression'+mathX+'"></div>').appendTo('#overall')
     .insertAfter($( "#"+x ));
     $('<div class="col-md-9" id="Selector'+mathX+'"></div>').appendTo('#rowExpression'+mathX);
     $('<h5> e '+mathX+'</h5>').appendTo('#Selector'+mathX);
     $('<div class="col-md-1 col-md-offset-2" id="CRUDExpression'+mathX+'"></div>').appendTo('#rowExpression'+mathX);
     $('<i class="btn success-item fas fa-plus-circle pr-1" onclick="addRow(this)" id="'+mathX+'" ></i>').appendTo('#CRUDExpression'+mathX);
     $('<i class="btn cross-item fas fa-minus-circle pl-1" onclick="deleteRow(this)" id="'+mathX+'" ></i>').appendTo('#CRUDExpression'+mathX);


}); 

}

function deleteRow(eId) {
    console.log(eId.id);
    $("#rowExpression"+eId.id).remove();    

}

This is my html.

<form action="#" method ="post">
<div id="overall" class="col-md-12">
</div>
<button type="submit" id="submit" class="btn btn-primary ml-2 mt-2" value="submit" >submit</button> 
</form>

Answer 1

在您的代码中，您使用的是“insertAfter()”，而您应该使用“.append()”，因为这样您将在最后一个代码之后添加新代码。

Answer 2

没有你的HTML是很难猜测（这里是这些类以及如何构建他们。我要说的尝试和使用后的替代insertAfter，这可能是问题。 http://api.jquery.com/insertafter/

Answer 3

I getting my answer with myself now. Thank you all.

function addRow(eId) {

     var mathX = Math.random().toString(36).substr(3, 12);

     $('#rowExpression'+eId.id).one( "click",function(){
         var nearest = $(this).prev().attr('id');

     console.log(nearest +'                neastest div');
     console.log(eId.id +'                    this id');
     console.log(mathX +'                     new id');


     var lastedId = $('.row').last().attr("id") ;
     console.log(lastedId, "rowExpression"+mathX);

     /*$('<div class="row mt-2"" id="rowExpression'+mathX+'"></div>').appendTo('#overall')
     .insertAfter($( "#"+nearest ));*/

     if('rowExpression'+eId.id == lastedId) {
         $('<div class="row mt-2"" id="rowExpression'+mathX+'"></div>').appendTo('#overall');

         }
     else{
         $('<div class="row mt-2"" id="rowExpression'+mathX+'"></div>').appendTo('#overall')
         .insertAfter($( "#"+nearest ));

         }
     $('<div class="col-md-9" id="Selector'+mathX+'"></div>').appendTo('#rowExpression'+mathX);
     $('<h5> e '+mathX+'</h5>').appendTo('#Selector'+mathX);
     $('<div class="col-md-1 col-md-offset-2" id="CRUDExpression'+mathX+'"></div>').appendTo('#rowExpression'+mathX);
     $('<i class="btn success-item fas fa-plus-circle pr-1" onclick="addRow(this)" id="'+mathX+'" ></i>').appendTo('#CRUDExpression'+mathX);
     $('<i class="btn cross-item fas fa-minus-circle pl-1" onclick="deleteRow(this)" id="'+mathX+'" ></i>').appendTo('#CRUDExpression'+mathX);



}); 

}