Dynamically add JS code to head tag

Question

I am trying to add a script to the head tag of my page. I am seeing the code that I am trying to add in the body tag but it doesn't show up in head tag.

$(document).load(function() {
   $('<script>console.log("hi");</' + 'script>').appendTo("head")
});

I see this being added in <body> but I dont see it in <head>.

I tried variations of append, appendTo and document.ready and document.load functions. None of those worked so far.

I went through cpuple of similar threads before I posted. I didn't seem to fix my issue

if script is working what difference does it make where it ends up anyway? WHat is the higher level problem? — charlietfl, Oct 06 '15 at 18:29
For some google analytics reason, i want this script to be added into head tag — user3861559, Oct 06 '15 at 18:37

score 0 · Answer 1 · answered Oct 06 '15 at 18:25

0

One thing you might need to do is escape the </ as <\/

If its an inline script though maybe you can try just adding a setTimeout to it.

answered Oct 06 '15 at 18:25

Romulo · Answer 2 · 2015-10-06T18:44:12.180

Try the following function:

(function (src) {
    var tagName = 'script', script = document.createElement(tagName);
    script.src = src;
    var elm = document.getElementsByTagName(tagName)[0];
    elm.parentNode.insertBefore(script, elm);
})('SCRIPT.SRC.HERE.js');

This will create a dynamic script tag and add it before the first script tag. Although it won't work in the way you want if you don't have any script tags inside your head. In this case, you could use the following function:

(function (src) {
    var tagName = 'script', script = document.createElement(tagName);
    script.src = src;
    var head = document.getElementsByTagName('head')[0];
    head.insertBefore(script, head.childNodes[0]);
})('SCRIPT.SRC.HERE.js');

This will directly get the first element inside your head tag and append the new script before it.

Your code works. You can also use `document.head.appendChild(script);` — Ryan Wheale, Oct 06 '15 at 19:40

Ryan Wheale · Answer 3 · 2015-10-06T19:36:08.200

0

The document doesn't fire a "load" event - or if it does, it's a bubbled event from something else loading (like another script or image file). Try changing document to window:

http://jsfiddle.net/5bhmwyrx/3/

$(window).load(function() {
   var script = $('<script>console.log("hi");</' + 'script>').appendTo(document.head);
   console.log("Script was appended to", script[0].parentNode.nodeName);
   //-> Script was appended to HEAD
});

$(document).load(function() {
   console.log("You should never see this");
});

document.onload = function () {
    console.log("You should not see this in modern browsers");
};

edited Oct 06 '15 at 19:36

answered Oct 06 '15 at 18:46

Ryan Wheale

26,022
8
76
96

Thanks, but still I dont see it in head tag – user3861559 Oct 06 '15 at 19:06
if you look at this, it does fire an onload event like window does (see: http://stackoverflow.com/a/588048/3769412) but it helps that the OP is using jQuery to deal with this, anyway which would smooth out anything and isn't answering the question OP asked anyway – Daemedeor Oct 06 '15 at 19:17
@Daemedeor - `document.onload = function () { console.log("document onload event"); };` doesn't log anything (in current browsers). That's so old it's not even implemented in browsers any more and was the JS api to `` - super super old school. – Ryan Wheale Oct 06 '15 at 19:25
@user3861559 - Did you try my fiddle?? Here is proof that it's being appended to the HEAD (look at the console): http://jsfiddle.net/5bhmwyrx/2/ – Ryan Wheale Oct 06 '15 at 19:26

Dynamically add JS code to head tag

3 Answers3