Dynamically inject javascript file - why do most examples append to head?

Question

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?

Answer 1

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.