title: Retrieving and appending HTML using PHP and Ajax
body: <p>Hi there I am trying to append HTML to a list to create an infinite scroll effect, please do not reply by telling me to use a plugin. </p>
  
  <p>I know from the inspector that onClick() is generating the HTML correctly via the PHP script it calls however the HTML generated is not being appended to the rest of the document. </p>
  
  <hr>
  
  <p>Here's my code (JQuery has been imported): </p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>    &lt;body&gt;
          &lt;div id='container'&gt;
              &lt;?php include 'inc/header.php'; ?&gt; 
              &lt;?php include 'inc/nav.php'; ?&gt;
  
              &lt;section class="grid-wrap"&gt;
                  &lt;ul class="grid swipe-right custom-grid" id="grid"&gt;
                      &lt;?php
                          $files = glob('img/gallery/*.{jpg,png,gif,JPG}', GLOB_BRACE);
  
                          $total = 9; //count($files);
  
                          for ($i = 0; $i &lt; $total; ++$i) {
                              echo "&lt;li&gt;&lt;a href='" . $files[$i] . "' target='_blank'&gt;&lt;img class='lazy' src='" . $files[$i] . "' alt= 'Image of Sheila' /&gt;&lt;h3&gt;View Full Image&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;";
                          }
                      ?&gt;
                  &lt;/ul&gt;   
  
                &lt;div id='load-more'&gt;VIEW MORE PHOTOS&lt;/div&gt;
              &lt;/section&gt;
  
  
              &lt;?php include 'inc/footer.php'; ?&gt;
  
          &lt;/div&gt;
  
          &lt;script&gt;
              $('#load-more').click(function(){
                  $.ajax({
                      url: 'inc/gallery/gallery2.php',
                      dataType: 'html',
                      sucess: function(php){$('.grid-wrap').append(php);}
                  });
              });
          &lt;/script&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p><strong>gallery2.php :</strong>    </p>
  
  <pre><code>        &lt;?php
              $files = glob('../../img/gallery/*.{jpg,png,gif,JPG}', GLOB_BRACE);
              $total = 9;
              $id = 1;
  
              echo '&lt;ul class="grid swipe-right custom-grid" id="grid' . $id . '"&gt;';
  
              for ($i = $total; $i &lt; ($total + 9); ++$i) {
                  echo "&lt;li&gt;
                          &lt;a href='" . $files[$i] . "' target='_blank'&gt;
                              &lt;img src='" . $files[$i] . "' alt= 'Image of Sheila' /&gt;
                              &lt;h3&gt;View Full Image&lt;/h3&gt;
                          &lt;/a&gt;
                        &lt;/li&gt;";
              }
  
              $total+= 9;
              echo '&lt;/ul&gt;';
          ?&gt;
  </code></pre>