Ways to add javascript files dynamically in a page

Question

I have seen Scriptaculous.js file to include its required javascript files dynamically. Is there any better approach to include javascript dynamically.

For example, I would like to include my js files like,

<script src="single.js?files=first.js,second.js,third.js..."></script> 

How can I do that in an efficient manner?

Answer 1

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 JavaScript file loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file 

i hope its use full

Answer 2

You can use the jQuery.getScript() function... I think it will be much easier to you with this to include a JavaScript .js file.

Here is the reference.