Infinite "Scroll" javascript module for ES6

InfiniteScroll-ES6.js

'use strict';

// Infinite scrolling loader, fires off a button click
//
// Sample HTML:
// <div class="js-infinite-scroll">
//   POSTS HERE
//   <a href="/url-to-more-content" class="js-infinite-scroll-next-button">Load More</a>
// </div>
// <div class="js-infinite-scroll-loading">...</div>
//
// Initialization:
// new InfiniteScroll( document.querySelector('.js-infinite-scroll') );

const nextButtonSelector = '.js-infinite-scroll-next-button';
const spinnerSelector = '.js-infinite-scroll-loading';
const infiniteScrollAreaSelector = '.js-infinite-scroll';

class InfiniteScroll {

  constructor(el) {
    this.el = el;
    this.bindNextButton();
    this.spinnerEl = document.querySelector(spinnerSelector);
  }

  bindNextButton = () => {
    const nextButtonsEl = document.querySelector(nextButtonSelector);
    nextButtonsEl.addEventListener('click', this.loadNext);
  };

  showSpinner = () => {
    this.spinnerEl.style.display = 'block';
  };

  hideSpinner = () => {
    this.spinnerEl.style.display = 'none';
  };

  loadNext = (e) => {
    e.preventDefault();
    const url = e.target.href;
    const button = e.target;
    button.parentNode.removeChild(button);
    this.showSpinner();
    this.requestNextHtml(url);
  };

  requestNextHtml = (url) => {
    const request = new XMLHttpRequest();

    request.open('GET', url, true);

    request.onload = () => {
      if (request.status >= 200 && request.status < 400) {
        // Success!
        const responseString = request.responseText;
        const newPosts = this.getPostsFromHTML(responseString);
        this.appendNewPosts(newPosts);
      }
      else {
        console.log("We reached our target server, but it returned an error");
        this.hideSpinner();
      }
    };

    request.onerror = function() {
      console.log("There was a connection error of some sort");
      this.hideSpinner();
    };

    request.send();
  };

  getPostsFromHTML = (htmlString) => {
    const tempDoc = document.implementation.createHTMLDocument();
    tempDoc.body.innerHTML = htmlString;
    return tempDoc.querySelector(infiniteScrollAreaSelector);
  };

  appendNewPosts = (postsHTML) => {
    this.el.appendChild(postsHTML);
    this.hideSpinner();
    // bind new pagination button if one came along with the postsHTML
    this.bindNextButton();
  };

}

export default InfiniteScroll;