Javascript to dynamically include content on an Unbounce page

menu-include.js

/* Example code - by Evan Donovan, public domain 
   Adjust the paths and selectors below as needed.   
*/

/**
 * Get HTML from another URL - 
 * Uses the vanilla JS XMLHttpRequest
 * https://gomakethings.com/ditching-jquery/#get-html-from-another-page
 * The first parameter is a URL to fetch, the second is the JS function that is called to handle the data that is received.
 * @param  {String}   url     The URL
 * @param  {Function} success Callback on success
 * @param  {Function} error   Callback on failure
 */
var getURL = function ( url, success, error ) {
  // Don't try to do XMLHttpRequest if browser doesn't support it
  // All modern browsers should support this - see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Browser_compatibility
  if ( !window.XMLHttpRequest ) { 
    return;
  }

  // Create new request
  var request = new XMLHttpRequest();
  
  // Setup callbacks
  request.onreadystatechange = function () {

    // If the request is complete
    if ( request.readyState === 4 ) {
  
      // If the request failed
      if ( request.status !== 200 ) {
        if ( error && typeof error === 'function' ) {
          error( request.responseText, request );
        }
        return;
      }

      // If the request succeeded
      if ( success && typeof success === 'function' ) {
        success( request.responseText, request );
      }
    }
  };

  // Get the HTML via XMLHttpRequest
  request.open( 'GET', url );
  request.send();
};

/* The following examples invoke the function defined above. */

// Request the HTML for the menu from the page and write to the page.
getURL(
  'http://www.example.com/unbounce-includes/menu.html',
  function (data) {
    // Find the menu container using an ID in the DOM.
    // You will need to set this ID in the custom HTML of the Unbounce page.
    var location = document.querySelector('#menu');
    // write the content from the third party site into the page.
    location.innerHTML = data;
  }
);

// More complex example - shows how to replace a DOM element in an Unbounce page.
getURL(
    'http://www.example.com/unbounce-includes/search-box.html',
      function (data) {
		// If there is a Google Custom Search container, remove it and insert a search box div.
		// https://gomakethings.com/removing-an-element-from-the-dom-with-vanilla-js/
    var elem = document.querySelector('#google-cse-searchbox-form');
		// Create new element and add class: https://techstacker.com/posts/PwuXTgD87J8SWXwBQ
    var newElem = document.createElement('div');
		newElem.classList.add('search-box');
		// Replace element that you selected with your new element
        elem.parentNode.replaceChild(newElem, elem);		
        // Find the search box container by CSS class. This is the parent of the Google Custom Search.
        var location = document.querySelector('.search-box');
        // inject the new element into the DOM with the data obtained from the external site.
        location.innerHTML = data;
      }
);

// Example for replacing something that just has generic Unbounce classes.
getURL(
    'http://www.example.com/unbounce-includes/contact-box.html',
      function (data) {
        // Find the contact box container.
        var location = document.querySelector('.lplh-14');
       // write the content from the third party site into the page.
       location.innerHTML = data;
      }
);

// Example of how to match an image and replace it with a div with a new logo.
getURL(
    'https://www.example.com/unbounce-includes/cityvision-logo.html',
      function (data) {
        // match the first logo element on the page - https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelector
        // fuzzy matching courtesy of https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors  
        var elem = document.querySelector('img[src*="cityvision-logo-v5"]')
		var newElem = document.createElement('div');
		newElem.classList.add('logo-container');
		// Replace old logo element with new one
		elem.parentNode.replaceChild(newElem, elem);
		// Find the logo container.
		var location = document.querySelector('.logo-container');
        // write the content from the third party site into the page.
        location.innerHTML = data;
}