🔥 Get a free month of Premium Access. Use code: FREEAUG at checkout

Dynamically Load jQuery Library Using Plain JavaScript

Sam Deering

This is how you can load the jQuery library using plain JavaScript. As the load takes place asynchronously so i’ve included a callback version too so you know when the script inserted has completed and you can start using jQuery! I previously posted about inserting scripts into secure pages so there are more options for you there too.

Load jQuery library using plain JavaScript

//Load jQuery library using plain JavaScript
  var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = true;
     newscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';

With callback

(function () {

    function loadScript(url, callback) {

        var script = document.createElement("script")
        script.type = "text/javascript";

        if (script.readyState) { //IE
            script.onreadystatechange = function () {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
        } else { //Others
            script.onload = function () {

        script.src = url;

    loadScript("https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function () {

         //jQuery loaded
         console.log('jquery loaded');