CODEWITHSUNDEEP
javascriptjquerydom
Harry
Harry

Reputation: 3391

Include jQuery from another JavaScript file

I am trying to include jQuery from a javascript file. I have tried the following, although it doesn't work.

var script = '<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>';
document.getElementsByTagName('head')[0].appendChild(script);

Upvotes: 4

Views: 6045

Answers (7)

flavian
flavian

Reputation: 28511

 (function() {
        var script = document.createElement('script');
        script.type = "text/javascript"; // keeping older browsers happy. 
        script.src = window.location.protocol + '//code.jquery.com/jquery-1.9.1.min.js';
        // browsers prevent cross-protocol downloading.
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);// In Opera a site can get by without a <head>
    })();

Upvotes: 1

dandavis
dandavis

Reputation: 16726

using a tiny re-usable script adder:

function fetch(url){
 var d=document, s='script';
 d.getElementsByTagName(s)[0].parentNode.appendChild(d.createElement(s)).src=url;
}

fetch('//code.jquery.com/jquery-1.9.1.min.js');

not all pages have HEADs in all browsers, but if a script is running, so can a sibling script tag...

Upvotes: 0

Akram Berkawy
Akram Berkawy

Reputation: 5060

First of all, the variable script contains the sequence </script> which you can not make it appears as it is in your code, because browser will assume(and it must) that it is <script> tag close. for example if your script code contains syntax error, which is a string variable that has no close " it will looks like 

<script>var bad = "abcd ;</script>

to solve this you can break the </script> string like "</scr" + "ipt>" or you could escape it: "<\/script>"

so:

var script = '<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"><\/script>';
document.getElementsByTagName('head')[0].appendChild(script);

Second thing is that appendChild() function accept a Node element and not a string

so:

var script = document.createElement("script");
script.src = "http://code.jquery.com/jquery-1.9.1.min.js";
document.getElementsByTagName("head")[0].appendChild(script);

Anyway, I prefer to use a module and JavaScript loader like RequireJS.

Upvotes: -1

Blender
Blender

Reputation: 298046

</script> closes the opening <script> block, even if it's in a string. I would do it this way:

(function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = document.location.protocol + '//code.jquery.com/jquery-1.9.1.min.js';

    document.getElementsByTagName('head')[0].appendChild(script)
})();

Upvotes: 8

supershnee
supershnee

Reputation: 1276

Just use the jQuery getScript() method to load jQuery: http://api.jquery.com/jQuery.getScript/

...Just kidding.

Try this code:

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
head.appendChild(script);

From: http://unixpapa.com/js/dyna.html

Also, if using on an https page, you will need to load the script from an https compatible CDN, like the Google Hosted Libraries (src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js")

Upvotes: 1

Skpd
Skpd

Reputation: 670

var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
document.getElementsByTagName('head')[0].appendChild(script);

Upvotes: 0

Guffa
Guffa

Reputation: 700152

You can't have </script> anywhere inside a script block, not even inside a string, because it will end the script block there.

Break up the ending tag in the string:

var script = '<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></scr'+'ipt>';

Upvotes: 1

Related Questions