Question

I have a case where I need to check if jQuery exists on a page and if it doesn’t, I need to load it. I create a script tag and reference the external jQuery library. How do I wait for the library to be loaded on the page before I continue with the rest of the script?

UPDATE:

Heres what it looks like after Gion’s suggestion:

if (typeof jQuery === 'undefined') {
    var j = document.createElement('SCRIPT');
    j.type = 'text/javascript';
    j.src = '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
    document.getElementsByTagName('head')[0].appendChild(j);
    j.onload = function () {
        var section = document.createElement('DIV');
        section.setAttribute('style', 'height:300px; width:250px; position: fixed; right: 0px; top: 100px;z-index: 9999; border-style:solid;border-width:1px;');
        section.innerHTML = '<p>steps</p><textarea name="steps"></textarea><p>expected results</p><textarea name="results"></textarea><p><input type="button" name="submit" value="add test case" /></p>';

        document.getElementsByTagName('body')[0].appendChild(section);
    };  
} 

Answer 1

<script type="text/javascript">
    if(typeof jQuery === 'undefined')
        document.write('<sc'+'ript type="text/javascript" src="jquery.js"></scrip'++'t>');
    window.onload = function(){
        // jquery should be present here
    });
</script>