how to display/append more records to scroll to bottom using jQuery
<p>I am new to jQuery. I have to implement a Facebook like functionality in my web app that when a user scrolls to the bottom, more records are brought and appended/displayed to the page. I have been able to successfully send the ajax request on scroll to bottom and fetch the records. The data I have brought from the server is perfect. But I am stuck in figuring out how to display/append that data to the page. I have tried something and failed. Please suggest.</p>

<p>My ajax call:</p>

<pre><code>var noOfMessageLoadsDone = 1;

$(window).scroll(function() {
 if($(window).scrollTop() + $(window).height() == $(document).height()) {
  if(!$.active){ 
    $.get(
    "/fetchMoreOnScroll",
    {loadsDone: noOfMessageLoadsDone},
    function(data) { 
      for (var i = 0; i &lt; data.length; i++) {
        var datum = data[i];
        var el = $("div .container").find("div .container").first().clone();
        el.removeAttr("id");
        el.attr("statusId", datum.id);
        if(datum.statuserPicName){
          el.children('img').attr("src", "/images/"+datum.statuserPicName);
        }

        el.find('p').text(datum.statuserFirstName+' '+datum.statuserLastName+': ');

        $("div .container").find("div .container").append(el);
      };

      noOfMessageLoadsDone++;
    }
   );
  }  
 }
 });
</code></pre>

<p>Also suggest if there is a more elegant solution to this problem than what I am trying to do. Any help will be much appreciated.</p>