How to load multiple JavaScript files dynamically

Today, I'm going to talk about how to dynamically load multiple JavaScript files using js. This allows you to quickly add new features and functionality without having to manually include the code in each page.

This technique is especially useful for web developers who need to add a variety of scripts and libraries into their application, but don't want the page loading time or bandwidth usage to suffer. With this method, you can easily add several JavaScript files without having them all downloaded at once.

The first step is setting up an array of the file paths that should be loaded. You can do this by creating a variable with all of the URLs.

<script>
 let scripts = [
   'file1.js',
   'file2.js', 
   'file3.js', 
   'file4.js'
  ];
</script>

Then, you'll need a function that create the script elements dynamically.

<script>
 let scripts = [
   'file1.js',
   'file2.js', 
   'file3.js', 
   'file4.js'
  ];
  function loadScripts(scripts){  
      for(var i=0; i < scripts.length; i++){ 
        let s = document.createElement('script'); 
        s.src = scripts[i];       
        document.querySelector('#body').appendChild(s);   
      }	
      alert(document.querySelector('#body').outerHTML)
  }
      
  loadScripts(scripts);
</script>

1. Loop through all script elements in array.
2. Create script element using the createElement() method.
3. Set the file path using the src attribute.
4. Now, append the created script elements to the div element as a child.
5. Finally, Call the loadScripts() function.