In just about every example I come across for injecting a script dynamically with javascript, it ends with:

document.getElementsByTagName("head")[0].appendChild(theNewScriptTag)

Even yepnope.js attaches new scripts before the first script in the page, like:

var firstScript = doc.getElementsByTagName( "script" )[ 0 ];
firstScript.parentNode.insertBefore( theNewScriptTag, firstScript );

My question is: why not just append it to the document body?

document.body.appendChild(theNewScriptTag);

It just seems to me that the DOM-traversal involved with getElementsByTagName -- or even the whole "insertAfter = parent.insertBefore" trick -- is wasting resources.

Is there a detriment to dynamically adding your scripts to the very bottom?

In just about every example I come across for injecting a script dynamically with javascript, it ends with:

document.getElementsByTagName("head")[0].appendChild(theNewScriptTag)

Even yepnope.js attaches new scripts before the first script in the page, like:

var firstScript = doc.getElementsByTagName( "script" )[ 0 ];
firstScript.parentNode.insertBefore( theNewScriptTag, firstScript );

My question is: why not just append it to the document body?

document.body.appendChild(theNewScriptTag);

It just seems to me that the DOM-traversal involved with getElementsByTagName -- or even the whole "insertAfter = parent.insertBefore" trick -- is wasting resources.

Is there a detriment to dynamically adding your scripts to the very bottom?

• javascript
• dom
• optimization
• micro-optimization

• This question might answer your doubts ! – palerdot Commented Aug 24, 2012 at 16:53

3 Answers 3

Seriously, why didn't this show up when I searched? document.head, document.body to attach scripts

Comment links to a perfect explanation: The ridiculous case of adding a script element.

Essentially, you have several options:

• hook to head

  document.getElementsByTagName('head')[0].appendChild(js)
  

  1. Pro - most pages have a head
  2. Con - not always autogenerated if not; traversal

• hook to body

  document.body.appendChild(js);
  

  1. Pro - shortest, no traversal
  2. Con - "operation aborted" error in IE7 if not executed from direct child of body

• hook to documentElement

  var html = document.documentElement;
  html.insertBefore(js, html.firstChild);
  

  1. Pro - always exists, minimal traversal
  2. Con - or does it? (fails if first child is a comment)

• hook to first script

  var first = document.getElementsByTagName('script')[0];
  first.parentNode.insertBefore(js, first);
  

  1. Pro - most likely always calling your dynamic load from a script
  2. Con - will fail if no previous scripts exist; traversal

So, the conclusion is -- you can do it any way, but you have to think of your audience. If you have control of where your loader is being executed, you can use document.body. If your loader is part of a library that other people use, you'll have to give specific instructions depending on what method you used, and be prepared for people abusing your specs.

I believe you can always just use document.write(...) this will have no dependencies on any element's been present or been manipulated by other scripts.

Something like:

document.write(unescape("%3Cscript src='my_file.js' type='text/javascript'%3E%3C/script%3E'")); 

You can add a script to the bottom of your page.

The advantage of adding the it to the head using insertBefore is to make it load asynchronously. Yes new browsers now support the async attribute but to work with older browsers (IE8 and under) appending it to the head is the only way to load it asynchronously

More on it