Untitled

<!doctype html>
<html>
<head>
  <title>Ajax Example</title>
</head>
<body>
  <section>
    <h1>Recent Posts</h1>
    <article>
      <h2>Post 1</h2>
      <p>This is post 1.</p>
    </article>
    <article>
      <h2>Post 2</h2>
      <p>This is post 2.</p>
    </article>
    <article>
      <h2>Post 3</h2>
      <p>This is post 3.</p>
    </article>
    <button id="load-more-posts">Load more posts</button>
  </section>

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function () {
  var button = $('#load-more-posts');
  button.one('click', function() {
    $.ajax({
      url: 'more-posts.html',
      method: 'GET',
      success: function (morePostsHtml) {
        button.replaceWith(morePostsHtml);
      }
    });
  });
});
</script>
</body>
</html>