How to implement a function “getScript” that fetches/executes a JavaScript file in browser ?

12 Mar, 2021
In this article, we will learn how to fetch a JavaScript file(.js) and load it in a web browser dynamically by using JavaScript with HTML. We need a web browser i.e., Chrome (recommended) or Electron Application. Sometimes we need to add a script in the document as per the requirement of the user interface which cannot be done on the default page load.
This article is all about fetching a JS file from any jQuery (CDN) link or React file in Document Object Model.
Approach :
Create a new script element.let newscript = document.createElement('script');Provide the source to the newly created script element.newscript.src = document.getElementById("source").value;Append the element in the DOM head so that it could execute the script. document.head.appendChild(newscript)
Create a new script element.let newscript = document.createElement('script');
let newscript = document.createElement('script');
Provide the source to the newly created script element.newscript.src = document.getElementById("source").value;
newscript.src = document.getElementById("source").value;
Append the element in the DOM head so that it could execute the script. document.head.appendChild(newscript)
 document.head.appendChild(newscript)
The above approach is implemented below in the example by considering the following file resources as for example scripts that are loaded dynamically. 
Resources: You can use this CDn link in the input field to get fetched.
JQuery CDN: https://code.jquery.com/jquery-3.5.1.js 
JQuery CDN:
 https://code.jquery.com/jquery-3.5.1.js 
React CDN : https://unpkg.com/react@17/umd/react.development.js
https://unpkg.com/react-dom@17/umd/react-dom.development.js
React CDN : 
https://unpkg.com/react@17/umd/react.development.js
https://unpkg.com/react-dom@17/umd/react-dom.development.js
Custom Script: https://graphicalstructure.codes/Geeks.js
Custom Script: 
https://graphicalstructure.codes/Geeks.js
Note: We will be using these files. (User can use any source as per their requirement).
Example :
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content=        "width=device-width, initial-scale=1.0" /></head>  <body>    <input type="text" id="source" style="width: 60%"         placeholder="Enter the link of source." />      <button id="loadscript">Fetch and Load!</button>      <script>        document.getElementById("loadscript")        .onclick = function getScript() {              let newscript =                 document.createElement("script");              newscript.src = document                .getElementById("source").value;                              document.head.appendChild(newscript);        };    </script></body>  </html>
Output:The following output shows the dynamic loading of JavaScript files.
jQuery CDN:
Dynamically loading ReactJS :
 loading Custom JS : 
Notes:
User can use any events on the element to load the script. In this article.“onclick” event has been used.
Scripts should not contain errors otherwise they may throw errors and may cause the immediate stoppage of code execution.
Use proper error handling so that the execution of code doesn’t get interrupted if any error occurred while fetching.
Above implementation is also valid for ElectronJS.
HTML-Questions
JavaScript-Events
JavaScript-Questions
Picked
Technical Scripter 2020
JavaScript
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
JavaScript | Promises
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?