How do I add jQuery library with Javascript?

Question

I would like to know how to load the jQuery library with pure Javascript and run something simple with jQuery after its load?

My code is like this:

function colocaScript(){
    var scriptJquery   = document.createElement('script')
    scriptJquery.type  = 'text/javascript';
    scriptJquery.src   = "http://code.jquery.com/jquery-1.10.2.min.js";
    scriptJquery.async = true;
    headHTML = document.getElementsByTagName('head')[0];
    headHTML.insertBefore(scriptJquery,headHTML.firstChild);
}

colocaScript()
$(document).ready(function () {
        alert("Ola Mundo");
})

It returns this error:

Uncaught ReferenceError: $ is not defined

Answer 1

Pass a callback function as parameter for the "colocaScript" function and this callback should run in the "onload" of the script.

        function colocaScript(callback)
        {
            var scriptJquery = document.createElement('script')
            scriptJquery.type = 'text/javascript';
            scriptJquery.src = "http://code.jquery.com/jquery-1.10.2.min.js";
            scriptJquery.async = true;
            scriptJquery.onload = function()
            {
                callback();
            };
            headHTML = document.getElementsByTagName('head')[0];
            headHTML.insertBefore(scriptJquery, headHTML.firstChild);
        }

        colocaScript(function()
        {
            $(document).ready(function()
            {
                alert("Ola Mundo");
            })

        });

Answer 2

Use this function

src = file url for example http://code.jquery.com/jquery-1.10.2.min.js

use of callback

LoadScript("http://code.jquery.com/jquery-1.10.2.min.js",function(){ alert('Acabou de carregar')  })

Function

 LoadScript = function (src, callback) {
            var s,
                r,
                t;
            var callback = (typeof(callback)=='function')? callback : function(){};
            r = false;
            s = document.createElement('script');
            s.type = 'text/javascript';
            s.src = src;
            s.async = true;
            s.onload = s.onreadystatechange = function () {
                //alert(this.readyState);
                if (!r && (!this.readyState || this.readyState == 'complete' || this.readyState == 'loaded') ) {
                    r = true;                
                    console.log("js carregado: "+src);
                    callback.call(this);
                }
            };
            try {
                t = document.getElementsByTagName('script')[0];
                t.parent.insertBefore(s, t);
            } catch (e) {
                t = document.getElementsByTagName('head')[0];
                t.appendChild(s);           
            }
        }   

Answer 3

The problem is that your script loads asynchronous, and because of this jQuery is called directly after colocaScript() and that is before the script have carried.

Use like this:

window.onload = function () {
    $(document).ready(function () {
        alert("Ola Mundo");
    })
}

Example

In this case I used window.onload, but you can use the onload also to control when the script has loaded as Lucas referred.