Add script tags and load scripts sequentially

You aren't waiting for the previous script to load before attempting to load the next one, you could try using Promises and the onload callback of the script elements.

function addScriptTag(url) {
  return new Promise(function (resolve, reject) {
    var script = document.createElement('script');
    script.onload = resolve;
    script.onerror = reject;
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  })
}

addScriptTag('http://path/to/jquery.js').then(function() {
  return addScriptTag('http://path/to/lib1.js');
}).then(function() {
  return addScriptTag('http://path/to/lib2.js');
});

Since the onload method of the new script is set to the resolve of the returned Promise of addScriptTag this should cause the scripts to wait until the previous one was loaded.

You could take it a step further and write a function that takes a list of scripts to load sequentially:

function loadScripts(scripts, promise) {
  if (!promise) {
    promise = new Promise();
  }

  script = scripts.shift();
  if (script) {
    addScriptTag(script).then(function () {
      loadScripts(scripts, promise);
    }).catch(function () {
      promise.reject();
    });
  } else {
    promise.resolve();
  }

  return promise;
}

loadScripts([
  'http://path/to/jquery.js',
  'http://path/to/lib1.js', 
  'http://path/to/lib2.js'
]).then(function () {
  console.log("Scripts loaded");
});

Have addScriptTag return a Promise that resolves when the script is loaded, and await each call:

function addScriptTag(url){
  return new Promise((resolve, reject) => {
    var script = document.createElement('script');
    script.addEventListener('load', resolve);
    script.addEventListener('error', reject);
    script.src = url;
    document.head.appendChild(script);
  });
}


async function loadThemAll(){
  await addScriptTag('http://path/to/jquery.js');
  await addScriptTag('http://path/to/lib1.js');
  await addScriptTag('http://path/to/lib2.js');
}

loadThemAll()
  .then(() => {
    console.log('Everything is loaded!');
  })
  .catch((err) => {
    console.log('There was a problem:', err);
  });

You can also use async=false, but this will block until the script loads, so may not be a great idea:

function addScriptTag(url){
  var script = document.createElement('script');
  script.setAttribute('async', 'false');
  script.src = url;
  document.head.appendChild(script);
}


function loadThemAll(){
  addScriptTag('http://path/to/jquery.js');
  addScriptTag('http://path/to/lib1.js');
  addScriptTag('http://path/to/lib2.js');
}

You can add defer attribute to your scripts. See this question for more details