[solved] appendTo(div) order

[solved] appendTo(div) order

Good morning...

So I've manipulated a few jquery scripts to get, more or less, an asynchronous comments form on a personal page (such as facebook).

The example can be seen here: www.leerecs.com/lookin_downers

Basically when I append a new comment to the page, it appends below all the other content. For example: I have the following comments..

1. good site
2. bad site
3. neat site
4. ugly site

Pending a new comment would go like this:

2. good site
3. bad site
4. neat site
5. ugly site
1. wow site

Is there anyway I can append the to the div TOP instead to the bottom? I don't know if I'm explaining myself clearly. I have attached my code to this topic.

<script type="text/javascript">
      $(function() {
            //retrieve comments to display on page
            $.getJSON("comments.php?aid=20&jsoncallback=?", function(data) {
               //loop through all items in the JSON array
               for (var x = 0; x < data.length; x++) {
                  //create a container for each comment
                  var div = $("<div>").addClass("row").appendTo("#comments");
                  var divi = $("<div>").addClass("img_container").appendTo(div);
                  var imguser = data[x].img;
                  $(function () {
                        var img = new Image();
                        $(img).load(function () {
                        }).error(function () {
                           // notify the user that the image could not be loaded
                  }).attr('src', 'docs/fotousuario/'+imguser+'').appendTo(divi);
                  });

                  
                  //add author name and comment to container
                  var divc = $("<div>").addClass("contenter").appendTo(div);
                  $("<div>").addClass("date").text(data[x].date).appendTo(divc);
                  $("<div>").addClass("comment").text(data[x].comment).appendTo(divc);
                                 }
               
            


            });   
            //add click handler for button
            $("#add").click(function() {
               //define ajax config object
               $("textarea").attr("disabled", "disabled");
               $("button").attr("disabled", "disabled");
               var ajaxOpts = {
                  type: "post",
                  url: "addComment.php",
                  data: "&author=&group=20&comment=" + $("#leaveComment").find("textarea").val(),
                  success: function(data) {                     
                  var div = $("<div>").addClass("row").appendTo("#newcomments").fadeIn("slow").slideDown("slow");
                  var divi = $("<div>").addClass("img_container").appendTo(div);
                  $(function () {
                        var img = new Image();
                        $(img).load(function () {
                        }).error(function () {
                           // notify the user that the image could not be loaded
                     }).attr('src', 'docs/fotousuario/.jpg').appendTo(divi);
                   });
                  
                  var divc = $("<div>").addClass("contenter").appendTo(div);
                  $("<div>").addClass("date").text('21/05/09').appendTo(divc);
                  $("<div>").addClass("comment").text($("#leaveComment").find("textarea").val()).appendTo(divc);
               //empty inputs
                  $("#leaveComment").find("textarea").val("Publicar tu comentario sobre este artista aqu&iacute;...");
                  }
               };
               $.ajax(ajaxOpts);
               $("textarea").removeAttr("disabled");
               $("button").removeAttr("disabled");
            });      
         });         
      </script>


I have made a temporary "aestetic" fix by pending new comments to a div that is above the container of the original comments, however, when you commit a second comment (or third), it goes back to the same issue...

Any help would be appreciated.

Thanks.