在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>');
    }   
} 

我希望始终将提交按钮放在最后。我该如何做到这一点？

- Jeyhun Rahimov

---

感谢大家的帮助。 - Jeyhun Rahimov

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

这个更利于性能。

演示

jQuery last-child

jQuery insertBefore

- iConnor

Answer 2

您可以使用:last伪选择器：
试试这个：

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

- Alessandro Minoccheri

Answer 3

Try this :

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

- Kiran Ruth R

Answer 4

我知道这个问题特别提到了 jQuery，但是使用纯JS也可以很好地完成，使用 insertBefore() 函数，MDN。(我在寻找解决类似问题的方案时遇到了这篇文章，但不使用jQuery)

ul = document.getElementById('my-list-id'); //Get the list from the DOM
li = document.createElement('li'); // Create the element to append

ul.insertBefore(li, ul.lastChild); // Append the element before the last child

- klovaaxel