Dynamically loading an external JavaScript or CSS file
To load a .js or .css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new “SCRIPT” or “LINK” element, assign it the appropriate attributes, and finally, use element.appendChild() to add the element to the desired location within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together:
function loadjscssfile(filename, filetype){
if (filetype==”js”){ //if filename is a external JavaScript file
var fileref=document.createElement(’script’)
fileref.setAttribute(”type”,”text/javascript”)
fileref.setAttribute(”src”, filename)
} else if (filetype==”css”){ //if filename is an external CSS file
var fileref=document.createElement(”link”)
fileref.setAttribute(”rel”, “stylesheet”)
fileref.setAttribute(”type”, “text/css”)
fileref.setAttribute(”href”, filename)
}
if (typeof fileref!=”undefined”) {
document.getElementsByTagName(”head”)[0].appendChild(fileref)
}
}loadjscssfile(”myscript.js”, “js”) //dynamically load and add this .js file
loadjscssfile(”javascript.php”, “js”) //dynamically load “javascript.php” as a JS file
loadjscssfile(”mystyle.css”, “css”) //dynamically load and add this .css file
Source: JavaScript Kit
