title: jquery infinitescroll how to append data
body: <p>I want to write a function to do a simple thing. I have 10 pages of data and each page has 20 records. When user goes to the bottom of page one and clicks <strong>Load More</strong>, I want to load the data of page two and <strong>append</strong> these data to displayed data of page one.</p>
  
  <p>I found a jquery plugin called infinitescroll. It works fine for me except that I cannot append the newer data.</p>
  
  <p>My html:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;script type="text/javascript" src="/js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/jquery.infinitescroll.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              console.log({
                  {
                      $p - &gt; getCurrentPage()
                  }
              });
              var $container = $('#masonny-div');
              $container.infinitescroll({
                  loading: {
                      msg: null,
                      msgText: "&lt;em&gt;Loading the next set of posts...&lt;/em&gt;",
                      speed: 'fast',
                  },
                  navSelector: "#next",
                  nextSelector: "#next a",
                  itemSelector: "#masonny-div",
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id='masonny-div'&gt;
          @foreach ($p as $x)
          &lt;div class="item"&gt;{{$x -&gt; name}}&lt;/div&gt;
          @endforeach
      &lt;/div&gt;
      &lt;br&gt;
      &lt;div id="next"&gt;
          &lt;a href="{{$p-&gt;getUrl($p-&gt;getCurrentPage() + 1)}}"&gt;Next&lt;/a&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is link to the next page: <code>$p-&gt;getUrl($p-&gt;getCurrentPage() + 1</code></p>
  
  <p>Every time when I click it, I get the <strong>next</strong> page's data, but how so I append that to the last page?</p>
  
  <p>I tried to invoke the callback function but that is not working. There is no message in the console.</p>
  
  <pre><code>var $container = $('#masonny-div');
  $container.infinitescroll({
      loading: {
          msg: null,
          msgText: "&lt;em&gt;Loading the next set of posts...&lt;/em&gt;",
          speed: 'fast',
      },
      navSelector: "#next",  
      nextSelector: "#next a",  
      itemSelector: "#masonny-div",             
  }, function(data){
      console.log('I am here!');
      console.log(data);
  });
  </code></pre>
  
  <p>Any information is welcome, thanks.</p>