Dynamically inject javascript file - why do most examples append to head?
dom, javascript, micro-optimization, optimization
Solution
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)
- Pro - most pages have a head
- Con - not always autogenerated if not; traversal
hook to body
document.body.appendChild(js);
- Pro - shortest, no traversal
- 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);
- Pro - always exists, minimal traversal
- 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);
- Pro - most likely always calling your dynamic load from a script
- 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.
Problem
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?