Untitled

<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>