[SOLVED] Load src javascript that has multiple src scripts inside

Load src javascript that has multiple src scripts inside

I am trying to load an external js file when the page loads that contains multiple src files and load them into a div. Here is my code and the ScriptList.js external file contains something like this.

<script type="text/javascript" src="Orange.js"></script>
<script type="text/javascript" src="Apple.js"></script>
<script type="text/javascript" src="Pear.js"></script>

My goal is to only update the external js file and not have to come into the HTML file to add all of these sources. Thanks.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TITLE HERE</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport">
    
    
</head>
<body>

<div id="ScriptList"> 
<div>
 
</body>


<script type="text/javascript" src="ScriptList.js"></script>





    
<script>

window.onload = function() {

GetMyScriptList()

}
</script>

Solution

You can do this way

create a scriptList.js file and include this in it

 function include(filePath) {
 
    let script = document.createElement('script');
    script.src = filePath;
    script.type = 'text/javascript';
    script.defer = true;
 
    document.getElementsByTagName('head').item(0).appendChild(script);
 
}
 
/* Include Many js files */

include('orange.js')
include('apple.js')
include('anything.js')