adding a script to the head tag

Question

Possible Duplicate:
How to dynamically insert a <script> tag via jQuery after page load?

i have this code

var scri = "<script type=\"text/javascript\">var _gaq = _gaq || []; _gaq.push(['setAccount','UA-22xxxxx3-15']); _gax.push(['_trackPageview']); <\/script>";
document.getElementsByTagName("script")[23].add(scri);
console.log(scri);

I want to append that element to the head of the document and i tried .append() .text() .add() and a lot of other methods but i get always erros. the last one was

Uncaught TypeError: Object #<HTMLScriptElement> has no method 'add'

Any idea how can i append this to the head elements?

http://stackoverflow.com/questions/3857874/how-to-dynamically-insert-a-script-tag-via-jquery-after-page-load — PeeHaa, May 11 '12 at 22:33

Madara's Ghost · Answer 1 · 2012-05-12T05:49:18.067

3

You should be using document.createElement and .appendChild():

var script = document.createElement("script");
script.innerHTML = "alert(\"This is the truth.\");";
document.head.appendChild(script);

edited May 12 '12 at 05:49

answered May 11 '12 at 22:24

Madara's Ghost

172,118
50
264
308

Why insert inline code into the HEAD tag? I know this is what the OP asked, but there is no reason to do it this way - one might as well just execute the desired code rather than insert it into the head tag. – jfriend00 May 11 '12 at 22:59
@jfriend00 You may have a better way to do this, but I think if you have a function which you will have to call multiple times later on, appending it to the DOM makes it much easier. Also I'd like to note that `document.head` processes much faster than `document.getElementsByTagName'head')[0]` and is supported even on IE, when performance is concerned. [Test it by yourself](http://jsperf.com/document-head) – Fabrício Matté May 11 '12 at 23:36
@FabrícioMatté - Appending to the head tag adds absolutely NOTHING. Just define a function in your code if you want to call it more than one time. This is javascript for goodness sakes. Use the features of the language. Define a function. Call a function. Execute code. Whenever you want to run some code, you don't create that code in text and append it to the DOM. You just define the code in your page and call it when you want it to run. This whole thread of appending text to the innerHTML of a script tag is ridiculous. Can you name any reason for doing so? – jfriend00 May 12 '12 at 00:23
@jfriend00 If your JS is being ran inside a sandbox e.g. Greasemonkey, appending it through DOM script injection is a common practice to have access to its functions later, as you can't access a Greasemonkey script function (after its onLoad runtime) from the DOM without appending it. That's the only case I can think of right now. – Fabrício Matté May 12 '12 at 00:50
@FabrícioMatté - fair enough. The OP didn't mention anything like Greasemonkey though. – jfriend00 May 12 '12 at 01:10
@jfriend00 Yes, I started commenting before reading the OP's code properly. I have to agree that for his case it'd be a waste of time to do those script injections, as you've pointed out. – Fabrício Matté May 12 '12 at 02:07
The appendage to the head element is a catch-all solution. It works for all kinds of situations, which is why I used it and not offered a different kind of solution. As for `document.head`, corrected, thanks. – Madara's Ghost May 12 '12 at 05:50

jfriend00 · Answer 2 · 2012-05-12T00:29:51.333

Why are you appending an inline script to the HEAD tag? There is no need to do that. Appending to the HEAD tag is useful if you want to load a remote script file by URL, but is not needed or useful in your case.

To just execute some inline code at the point where your JS code wants to run that, just execute your code like this:

var _gaq = _gaq || []; 
_gaq.push(['setAccount','UA-22xxxxx3-15']);
_gaq.push(['_trackPageview']);

adding a script to the head tag

2 Answers2