在列表顶部显示最后一条评论

Question

I have script that add comment to DB with AJAX and than print it on the screen, at the end of the previous comments

How can I change it so the new comment (the one that user just add) will appear at the top of the comments?

$(function() {
    $(".addComment").click(function(){

        var element = $(this);
        var refID = element.attr("id");
        var userID = element.attr("userID");
        var main = $("#main:checked").val();
        var contentText = $("#contentText").val();
        var act = 'add';
        var info = 'refID=' + refID + '&userID=' + userID + '&main=' + main + '&contentText=' + contentText + '&act=' + act;
    //  alert(info);

        $("#loading").html('<img src="loader.gif" align="absmiddle">&nbsp;loading...');

         $.ajax({
            type: "POST",
            url: "ajax/comments.php",
            data: info,
            success: function(response){
            $("#loading").ajaxComplete(function()
            {
            }).slideUp();
             document.getElementById("contentText").value="";
             $("#comments").append(response);
        //  $('.formComment'+ownerID).fadeOut(200).hide();
        //  $('.formComment'+ownerID).fadeIn(200).show();
           }
         });

        return false;
    });
});


        <ul id="comments">
            <?PHP
                $query = mysql_query("SELECT * FROM `comments` WHERE (userID = '$_SESSION[userID]') ORDER BY date DESC"); 
                while($index = mysql_fetch_array($query))
                {
                  echo '<li id="comment_'.$index["id"].'">';
                      echo '<a href="#" class="del_button" id="del-'.$index["id"].'">';
                        echo '<img src="images/icon_del.gif" border="0" />';
                      echo '</a>';
                  echo $index["text"].'</li>';
                }                   
            ?>
        </ul>

PHP page:

if(mysql_query("INSERT INTO comments (userID, pageName, refID, text, main, date) VALUES ('$_POST[userID]', 'yard', '$_POST[refID]', '$contentToSave', '$_POST[main]', '$dateLX') ") )
{
     //Record was successfully inserted, respond result back to index page
      $commentID = mysql_insert_id(); //Get ID of last inserted row from MySQL
      echo '<li id="comment_'.$commentID.'">';
        echo '<a href="#" class="del_button" id="del-'.$commentID.'">';
            echo '<img src="../images/deleteS.png" border="0" />';
        echo '</a>';
      echo $contentToSave.'</li>';
    //  mysql_close($connecDB); //close db connection

}

Answer 1

Change this line:

 $("#comments").append(response);

To:

 $("#comments").prepend(response);

http://jsfiddle.net/CXNF5/