Include a JS file using jQuery

Question

I actually have a problem with including JS file using jQuery. I found many sources but no one work with me. I'm pretty sure that the path of the js file is right. These are my two tries :

The first one (which I prefer) is working with <link> (to include CSS files) but it's not working with <script> tags.

 $('head').append('<script type="text/javascript" src="'+addon+'"></script>');

And the second one is by using get HTTP request. And here is my try :

 $.getScript(addon, function(){});

So, the question is: what is wrong with the first code? Because I tried it before with <link> tags and its working so good.

$('head').append('<script type="text/javascript" src="'+addon+'"><\/script>'); Is it right way to append external js in our head section dynamically — Anup
– Anup, Commented Jul 3, 2014 at 11:23

David Thomas · Accepted Answer · 2013-03-04 20:49:22Z

13

Have you considered:

$('<script />', { type : 'text/javascript', src : addon}).appendTo('head');

This avoids having to manually escape the </script> closing tag.

answered Mar 4, 2013 at 20:49

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

techie_28 Over a year ago

@DavidThomas thats the prettiest way I saw to do this..Please refer me to a link where I can get more detail about such a use of jQuery object?..thanks.

mplungjan · Accepted Answer · 2013-03-04 20:49:11Z

4

You MUST escape the end tag <\/script> otherwise you close the scripts prematurely

answered Mar 4, 2013 at 20:49

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

Mangesh Borkar · Accepted Answer · 2013-06-11 12:18:17Z

1

try $.holdReady(true); $.getScript("sample.js", function() { $.holdReady(false); });

This ensures that your js is fully loaded before the onready object is fired and thus you can be sure that any objects/functions of the dynamically included js are available.

answered Jun 11, 2013 at 12:18

Mangesh Borkar

712 silver badges7 bronze badges

Comments

Walery Strauch · Accepted Answer · 2013-10-01 11:03:00Z

1

try

$.when(
    $.getScript( "sample.js" ),
    $.getScript( "simple.js" ),
    $.getScript( "jquery.js" ),
    $.Deferred(function( deferred ){
    $( deferred.resolve );
    })
    ).done(function(){
        //place your code here, the scripts are all loaded
});

edited Oct 1, 2013 at 11:03

Walery Strauch

7,1308 gold badges56 silver badges61 bronze badges

answered Oct 1, 2013 at 10:34

Manjunath

568 bronze badges

Collectives™ on Stack Overflow

Include a JS file using jQuery

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related