How do I insert a script tag in to the top/beginning of head tag?

Asked 19/10, 2012 at 17:26 Answered 16/10, 2017 at 20:30

I want to insert a script tag before all the rest of the scripts in the head tag. How would I do that with native javascript?

<head>
    //INSERT SCRIPT HERE
     <script type="text/javascript" src="common.js"></script>
     <script type="text/javascript" src="omni-controls.js"></script>
</head>

When I use this, it just appends after all the tags in the head tag.

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

Archibaldo answered 19/10, 2012 at 17:26 Comment(7)

What's the reasoning for this? It will not change the execution order of the existing scripts. – Mythological 19/10, 2012 at 17:29

Why do you need to insert it at the top? Since it's being dynamically inserted, you can assume the other scripts have already loaded. Therefore, placing it at the top of the HEAD tag wouldn't matter. – Dogmatize 19/10, 2012 at 17:29

If you must, you can use insertBefore although I don't see the point. – Involve 19/10, 2012 at 17:29

The script I am inserting is jquery and there is a script in the head that requires jquery and I get an error in console say "jquery is not defined" and that script won't load. – Archibaldo 19/10, 2012 at 17:44

@Archibaldo Then this will not help, you are loading in jQuery too late as the other script has failed to find it and stopped running. Why not just add the script tag in there without javascript? – Kenney 19/10, 2012 at 17:46

@Justin: You should really ask about the actual problem, and not your presumed solution. If your code relies on jQuery, you should load jQuery as part of the page. – Titanothere 19/10, 2012 at 17:49

Got it. Let me edit this question and present the actual problem. Thanks. – Archibaldo 19/10, 2012 at 18:14

var head = document.getElementsByTagName("head")[0]

head.insertBefore(script, head.firstChild);

Titanothere answered 19/10, 2012 at 17:29 Comment(6)

You could explain the code I guess, provide links to docs, description of how it works... I didn't -1, just taking a guess. – Involve 19/10, 2012 at 17:35

@sachleen: Yeah, that may be it. I think some code like this is effectively self-documenting. – Titanothere 19/10, 2012 at 17:48

@user1689607 When a user comes in asking how to put a script at the top of the head because they want it to load before the other two... well, let's just say you should assume they know very little and need explaining/hand-holding ;D – Kenney 19/10, 2012 at 17:50

FYI, this accomplishes what the OP asked for, but doesn't result in anything different than using appendChild() because the other scripts have already executed so putting a new one before them vs. after them doesn't change anything. My guess is that the OP is mistaken about thinking that this will solve a problem for them. – Swacked 19/10, 2012 at 17:52

@TheZ, jfriend00: I'm certain this is likely an X/Y Problem. The stubborn part of me likes to answer the direct question, and let them live with the result of not asking about the actual problem. – Titanothere 19/10, 2012 at 17:54

@user1689607 Haha, fair enough, I feel like that too some days – Kenney 19/10, 2012 at 17:56

Get the firstChild of the <head>, and then use insertBefore.

This won't change the order scripts are loaded in though (since you'll be inserting it into the DOM after other scripts have been parsed), so this won't give any significate difference from just using appendChild

Jahnke answered 19/10, 2012 at 17:29 Comment(0)

document.head.insertBefore(script, document.head.firstElementChild);

Hershberger answered 16/10, 2017 at 20:30 Comment(0)

Recommended topics

Hot tags