Check if a jquery has been loaded or not - GeeksforGeeks

06 Dec, 2019
Given a document, The task is to determine whether JQuery has been loaded or not, If not then load it dynamically using JavaScript. Below are the examples to check:Approach:
First check if it is loaded.
If not loaded then load it dynamically, create a script element and add properties like(type, src) to it and then finally append it at the end, inside of the head element.
Example 1: In this example, the JQuery is already loaded so message ‘Script already loaded!’ prints on screen.
<!DOCTYPE HTML><html>  <head>    <title>        JavaScript       | Check if jquery has been loaded, If not then load.    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head>  <body style="text-align:center;"       id="body">    <h1 style="color:green;">              GeeksForGeeks          </h1>    <p id="GFG_UP"        style="font-size: 19px;               font-weight: bold;">    </p>    <button onClick="GFG_Fun()">        click here    </button>    <p id="GFG_DOWN"        style="color: green;               font-size: 24px;               font-weight: bold;">    </p>    <script>        var up =             document.getElementById('GFG_UP');        var down =             document.getElementById('GFG_DOWN');        up.innerHTML =           "Click on button to check whether JQuery is loaded";          function GFG_Fun() {            if (!window.jQuery) {                var el = document.createElement('script');                el.type = "text/javascript";                el.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js";                document.getElementsByTagName(                  'head')[0].appendChild(el);                down.innerHTML = "Script loaded successfully!";            } else {                down.innerHTML = "Script already loaded!";            }        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Example 2: The src attribute of script element is changed to sc. In this example, the JQuery is not loaded so message ‘Script loaded successfully!’ prints on screen after successful loading.
<!DOCTYPE HTML><html>  <head>    <title>        JavaScript       | Check if jquery has been loaded, If not then load.    </title>    <script sc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head>  <body style="text-align:center;"       id="body">    <h1 style="color:green;">              GeeksForGeeks          </h1>    <p id="GFG_UP"        style="font-size: 19px;               font-weight: bold;">    </p>    <button onClick="GFG_Fun()">        click here    </button>    <p id="GFG_DOWN"       style="color: green;              font-size: 24px;              font-weight: bold;">    </p>    <script>        var up =             document.getElementById('GFG_UP');        var down =             document.getElementById('GFG_DOWN');        up.innerHTML =           "Click on button to check whether JQuery is loaded";          function GFG_Fun() {            if (!window.jQuery) {                var el =                     document.createElement('script');                el.type = "text/javascript";                el.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js";                document.getElementsByTagName(                  'head')[0].appendChild(el);                down.innerHTML = "Script loaded successfully!";            } else {                down.innerHTML = "Script already loaded!";            }        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
nidhi_biet
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Difference Between PUT and PATCH Request
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?