Placing a div above another when submitting forms in jquery/ajax

Question

I have a chat system which uses ajax,jquery and php. It submits messages automatically and echoes them. When the messages load its like this

But when I submit another message, its going to be below these 3 messages.

How do i make that all submited/loaded messages be on top of these?

I have tried this but it just places the messages below:

In the html file

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

PHP file after making an ajax call

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

You should use .prepend(data), like in the example below:

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

This should do the trick

Answer 2

Add this code to your div

   style="z-index:99999;"

if the above one doesn't work then try this:

   style="position:absolute;z-index:999999;"

If using the above code you may need to adjust the margins or alignments.

Answer 3

@Iharby解决了问题这是代码

$(before what).first().before(data);