追加元素不结束，在jQuery中的最后一个元素之前

Question

我试图用AJAX帖子发表评论。但最后comment元素包含提交按钮。添加后，提交按钮后出现新项目。

<div class="commentContainer" > 

    <div class="comment"> 
     <div class="commentText">Any comment1 ... </div> 
    </div> 

    <div class="comment"> 
     <div class="commentText">Any comment2 ... </div> 
    </div> 
     .................................... 
    <div class="comment"> 
     <div class="sendPanel"> 
      <input type="submit" value="Post" /> 
     </div> 
    </div> 

</div> 

和发布请求的结果：

success: function (result) { 
    if (result.success) { 
     $('.commentContainer').append('<div class="comment"><div class="commentText">' + result.text + '</div></div>'); 
    } 
} 

我想继续提交始终结束按钮。我怎样才能做到这一点？

Answer 1

试试这个

$('<div class="comment"><div class="commentText">' + result.text + '</div></div>') 
    .insertBefore('commentContainer .comment:last-child'); 

甚至更​​好

$('<div>', {'class': 'comment'}).append(
    $('<div>', {'class': 'commentText', text: result.text}) 
).insertBefore('.commentContainer .comment:last-child'); 

这一个是获得更好的性能

Demo

jQuery last-child

jQuery insertBefore

Answer 2

试试这个：

success: function (result) 
    { 
     if (result.success) 
     { 
      $('<div class="comment"><div class="commentText">' + result.text + '</div></div>').insertBefore('.commentContainer .comment:last'); 
     } 
    } 

Answer 3

您可以使用：最后伪选择：
试试这个：

success: function (result)  
    { 
        if (result.success)  
        { 
            $('.commentContainer').find('div:last').before('<div class="comment"><div class="commentText">' + result.text + '</div></div>'); 
        }    
    }