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.

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.

• javascript
• jquery
• include

• 2 You MUST escape the end tag <\/script> – mplungjan Commented Mar 4, 2013 at 20:48
• Do you realize they are both get requests? ;) – epascarello Commented Mar 4, 2013 at 20:55
• $('head').append('<script type="text/javascript" src="'+addon+'"><\/script>'); Is it right way to append external js in our head section dynamically – Anup Commented Jul 3, 2014 at 11:23

4 Answers 4

Have you considered:

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

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

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

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.

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
});