Vanilla JS implementation of JQuery's .load

loadPageSection.js

/**
 * Loads an HTML document from a URL and retuns an element selected using
 * the 'selector' parameter
 * 		Example usage:
 * 				loadPageSection('./myPage.html', '#container', (r, err) => console.log(r, err));
 *
 * @method loadPageSection
 * @param  {String} url
 * @param  {String} selector - A valid CSS selector
 * @param  {Function} callback - To be called with two parameters (response, error)
 * @return {void} - The Element collected from the loaded page.
 */
window.loadPageSection = function loadPageSection(url, selector, callback) {
  if (typeof url !== 'string') {
    throw new Error('Invalid URL: ', url);
  } else if (typeof selector !== 'string') {
    throw new Error('Invalid selector selector: ', selector);
  } else if (typeof callback !== 'function') {
    throw new Error('Callback provided is not a function: ', callback);
  }

  var xhr = new XMLHttpRequest();
  var finished = false;
  xhr.onabort = xhr.onerror = function xhrError() {
    finished = true;
    callback(null, xhr.statusText);
  };

  xhr.onreadystatechange = function xhrStateChange() {
    if (xhr.readyState === 4 && !finished) {
      finished = true;
      var section;
      try {
        section = xhr.responseXML.querySelector(selector);
        callback(section);
      } catch (e) {
        callback(null, e);
      }
    }
  };

  xhr.open('GET', url);
  xhr.responseType = 'document';
  xhr.send();
};

Hey Lazamar, I am getting the console message with the updated html, but it isn't reflected on the actual page. Is there something else I need to do?

loadPageSection('http://localhost/notes/times/time/time.php', '#log-files', (r, err) => console.log(r, err));

lazamar, great resource, thanks for sharing. I think it that at the moment it can be used with fetch API instead of XHr which is on it's way to be deprecated if not yet.

The use of the callback function confused me at first, so here is another example.

I used this script to add the same header element (a navigation menu) to different pages, where updating the navigation menu automatically updates the navigation target element in the header of all those pages.

My root folder has the following files:

• loadpagesection.js, with lazamar's code
• nav.html, with a <nav id="navsource">Insert navigation menu here.</nav> element.
• article1.html and all other html files, which all have a <div id="navtarget"></div> element nested in the header. All these pages include:

<script defer>
 (function () {
  loadPageSection("./nav.html", "#navsource", assignToTarget);
  function assignToTarget (source) {document.getElementById('navtarget').appendChild(source)}
  })();
</script>

This way the element with id=navsource is automatically nested under id=navtarget on every page. Note that this does not work in local files, since the same origin policy will prevent you from loading files into other files that are not on the same domain. You will need to host your site online or set up a local server.