How do you import multiple javascript files in HTML index file without the bloat?

Including a JavaScript file in another JavaScript file is common in web development.

Because many times we include the JavaScript file at run time on the behalf of some conditions.

So, we can achieve this using JavaScript as well as using jQuery.

Method 1: Use JavaScript to include another JavaScript file

1. Add the following function in your web page.

   function loadScript(url)
   {    
       var head = document.getElementsByTagName('head')[0];
       var script = document.createElement('script');
       script.type="text/javascript";
       script.src = url;
       head.appendChild(script);
   }
   

2. just call the below loadScript function, where you want to include the js file.

   loadScript('/js/jquery-1.7.min.js');
   

Method 2: Use jQuery to include another JavaScript file.

1. Add jQuery File in your webpage.

   <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
   

2. Just call the getScript function functions.

   jQuery(document).ready(function(){
       $.getScript('/js/jquery-1.7.min.js');
   });
   

How to include a JavaScript file in another JavaScript File