javascript - 在 jquery/ajax 中提交表单时将一个 div 放在另一个之上

Question

我有一个使用 ajax、jquery 和 php 的聊天系统。它自动提交消息并回显它们。当消息像这样加载时

但是当我提交另一条消息时，它会在这 3 条消息的下方。

我如何使所有提交/加载的消息都在这些消息之上？

我已经试过了，但它只是将消息放在下面:

在html文件中

<div id="new_entries"></div>

进行 ajax 调用后的 PHP 文件

echo '<div class="chat_mes_wrapper" style="position: relative;">

                <div class="person_avatar second_tab right_side" style="margin-left: 2vw;">
                    <img src="',$your_avatar,'">
                </div>

                <div class="message_bubble right_side">
                <div class="triang_right"></div>

                <p>',$message_text,'</p>
                <div class="sSfIlMGr right_side">
                    <a class="tooltip" style="color: #999;">
                        ', $language['Seen_text'] ,' ', $language['Before'] ,' ', TimeBetween(time()) ,'
                        <span>', $language['Sent'] ,' ', FormatUnix(time()) ,'</span>
                    </a>
                </div>
            </div>

        </div><div class="spacing" style="height: 8vw;"></div>';

JQuery

$.ajax({
                 url: 'Javascript/returns/send_message.php',
                 type: 'post',
                 data: {recNbI          :       $(".sFNha").attr('id').substr(4),
                        text            :       $("#mFDARcIaK").serialize(),
                        name            :       $("#X_Y_Z").data('name'),
                        avatar          :       $("#X_Y_Z").data('avatar'),
                        lFfDu           :       $("#X_Y_Z").data('language'),
                        fTb             :       false},
                 success: function(data) {
                    $(".chat_mes_wrapper").first().insertBefore( "#foo" );;
                 },
                 complete: function()
                 {
                     Loader();
                 },
                 error: function()
                 {
                     Loader();
                 }
            });

Answer 1

您应该使用 .prepend(data)，如下例所示:

HTML

<div id="new_entries"></div>

Javascript

//use this in your ajax response data
$.ajax({
  url: "your.php",
  cache: false
}).done(function(data) {
    $( "#new_entries" ).prepend(data);
});

这应该可以解决问题