I am adding <script type="text/javascript" src="http://somedomain/somescript.js"> to the document head via jQuery. This is the code I use:

$(document).ready(function () {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = (document.location.protocol == "https:" ? "https://ssl" : "http://www") + ".google-analytics/ga.js";
    $("head").append(s);
});

While the script seems to be working perfectly, I do not see the scripts in the head when I use FireBug to inspect document head. This snippet does not show the added script(s) either:

$('script[src]').each(function(){
    console.log(this.src);
});

Is this normal or am I doing something wrong here? What bothers me is the fact that I see other scripts in the head section that were lazy/dynamically loaded but not those that I added. Also wondering if it is OK to load scripts that manipulate DOM in the document ready function.

UPDATE

Replacing the code from:

$("head").append(s);

to

document.getElementsByTagName("head")[0].appendChild(s);

fixes the problem. The resulting DOM appears correctly in FireBug and jQuery correctly returns the script tags that were added static/dynamically.

I am adding <script type="text/javascript" src="http://somedomain/somescript.js"> to the document head via jQuery. This is the code I use:

$(document).ready(function () {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = (document.location.protocol == "https:" ? "https://ssl" : "http://www") + ".google-analytics./ga.js";
    $("head").append(s);
});

While the script seems to be working perfectly, I do not see the scripts in the head when I use FireBug to inspect document head. This snippet does not show the added script(s) either:

$('script[src]').each(function(){
    console.log(this.src);
});

Is this normal or am I doing something wrong here? What bothers me is the fact that I see other scripts in the head section that were lazy/dynamically loaded but not those that I added. Also wondering if it is OK to load scripts that manipulate DOM in the document ready function.

UPDATE

Replacing the code from:

$("head").append(s);

to

document.getElementsByTagName("head")[0].appendChild(s);

fixes the problem. The resulting DOM appears correctly in FireBug and jQuery correctly returns the script tags that were added static/dynamically.

• javascript
• jquery
• debugging
• firebug

• I believe this is normal. Firebug says "Warning. Script Panel inactive during page load - reload to see all sources". That suggests that only scripts available on page load can be debugged. – MvanGeest Commented Jun 19, 2010 at 13:23
• 1 Can a jQuery guru verify that <script> added via $.append method do not get physically added to the DOM, and instead they are just eval uated? – Salman Arshad Commented Jun 21, 2010 at 8:19
• Why don't you use $.getScript() ? api.jquery./jQuery.getScript – Ionuț Staicu Commented Jun 21, 2010 at 13:19
• I think by default $.getScript tries to avoid the browser cache, which I don't want for this particular case. – Salman Arshad Commented Jun 22, 2010 at 8:33
• Try $(document.head).append(s);. – user492203 Commented Feb 11, 2011 at 13:14

4 Answers 4

You will see a request being made to the script in the NET tab but the script tag won't be visible when inspecting the DOM. This seems like a bug in FireBug.

This is a bug in Mozilla's 'jsd' debugger support. One workaround is post on the on the bug cited above:

http://code.google./p/fbug/issues/detail?id=1774

If jquery used eval() instead of script tag injection then you could debug this in Firebug.

Ok, I found this tip on jQuery.:

> It should be noted that any attempts to append script elements using this
> method will fail silently:
> $('#element').append("<script></script>");

>> Not exactly. Scripts will be evaluated first, and then discarded.
>> So, if you do this:
>> $('#element').append("<script>alert('hello');</script>");
>> You'll see the alert.

This probably means that the script is evaluated but not inserted in the DOM.

Test it in Chrome as well using the Right-click "Inspect Element" option to use the full debugger (view source will not show the script's modifications). The elements HTML tab should show real-time changes to the DOM