title: How to append getJSON's results to a div each time I click the loadmore button?
body: <p>On load of a page my <code>getJSON</code> call displays its output to a div (called myDiv).</p>
  
  <p>Now I want to add a button at the end of the page and when the user clicks that button, I want to make another call to <code>getJSON</code>, but this time I want to increment the page_number by one, each time the user clicks on the button and displays the new result at the end of the previous results. Could you guys show me how I can do this?</p>
  
  <pre><code>&lt;head&gt;
    &lt;script&gt;
      //var counter = 1;
      $.getJSON('http://anyorigin.com/get?url=https://www.myothersite.com/getit.php?page_number=+counter&amp;type=TopVideos&amp;sortBy=newest&amp;callback=?', function(data){
        var siteContents = data.contents;
        //writes to textarea
        document.myform.outputtext.value = siteContents;
        document.getElementById("myDiv").innerHTML=siteContents;
        $('#loadingimg').hide();
      });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="MainDiv"&gt;
      &lt;div class="MainContent"&gt;
        &lt;div class="ContentWidth"&gt;
          &lt;div id="JSListVideo" class="VideoList"&gt;
            &lt;div id="myDiv"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And the button code:</p>
  
  <pre><code>&lt;div class="MoreButtonSection"&gt;
    &lt;div class="RedButton"&gt;
      &lt;span class="LeftEnd"&gt;&lt;/span&gt;
      &lt;span class="Centre"&gt;
        &lt;a href="javascript:void(0);" onclick="seemore();" title="See more"&gt;see more&lt;/a&gt;
      &lt;/span&gt;
      &lt;span class="RightEnd"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>