我如何将此 div 作为所有子项的最后一个子项而不是第一个子项进行预置/附加？

问：

所以我有一个呈现HTML的视图，看起来像这样：

现在发生的事情是，当用户添加新评论时，它现在被添加到该列表的顶部，即突出显示的。但是，我希望它添加到列表中的最后一个之后，而不是作为第一个。我该怎么做？div.social-comment

这是看起来像的：create.js.erb

$(".question-<%= @comment.commentable.id %>").prepend("<%= j (render partial: 'comments/comment', locals: { comment: @comment}) %>");

我怎样才能实现我想要的？

编辑 1

我的错，我对最初的问题并不完全清楚。

我不能只使用 ，因为存在一个表单字段，该字段当前位于该子列表的底部。.append

如果我使用append，修改后的HTML是这样的：

请注意，出现在最后一个 ..row .question-46-new.social-comment

所以这最终产生了这个：

这显然是我不想要的。

我想要的是让新评论出现在该文本框的正上方，以及现有评论列表的末尾。Write Comment

编辑 2

这是我的 DOM 树在尝试 Pranav 的建议后的样子：

编辑 3

在 Pranav 的最新尝试之后，这些是结果。

我试过这个：

$(".question-<%= @comment.commentable.id %>").children(".social-comment").last().after("<%= j (render partial: 'comments/comment', locals: { comment: @comment}) %>");

当有现有评论时，这很有效，它只是将其添加到现有评论的最后一个。但是，当没有现有评论时，新评论就会消失。

这是没有注释时 DOM 树的图片：

这是添加注释后的 DOM 树的图片，使用上面的：.js.erb

没有变化。对于它的价值，我还尝试了另一个建议：

$(".question-<%= @comment.commentable.id %> > .social-comment:last").after("<%= j (render partial: 'comments/comment', locals: { comment: @comment}) %>");

我也有类似的行为。当有现有注释时，它起作用，但当没有注释时，它不起作用。

编辑 4

当我使用 Pranav 的建议时，这就是结果。:before

当我添加一条评论时，这是我的评论部分的样子，当时之前没有评论（请注意，间距是关闭的，与其他 DOM 元素的对齐看起来很奇怪）：

然后，当有现有注释时，它看起来像这样（注意对齐方式看起来多么奇怪）：

但是，如果我刷新，这就是它的样子（这是它应该的样子，但不是添加评论后立即的样子）：