A simple jquery code for dynamically loading js and css_jquery

A simple jquery code for dynamically loading js and css, which is used to load some common js and css files through js functions when generating pages.

//how to use the function below: 
//$.include('file/ajaxa.js');$.include('file/ajaxa.css'); 
//or $.includePath = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files are in the same directory) 
$.extend({ 
includePath: '', 
include: function(file) 
{ 
var files = typeof file == "string" ? [file] : file; 
for (var i = 0; i < files.length; i++) 
{ 
var name = files[i].replace(/^\s|\s$/g, ""); 
var att = name.split('.'); 
var ext = att[att.length - 1].toLowerCase(); 
var isCSS = ext == "css"; 
var tag = isCSS &#63; "link" : "script"; 
var attr = isCSS &#63; " type='text/css' rel='stylesheet' " : " type='text/javascript' "; 
var link = (isCSS &#63; "href" : "src") + "='" + $.includePath + name + "'"; 
if ($(tag + "[" + link + "]").length == 0) $("head").prepend("<" + tag + attr + link + "></" + tag + ">"); 
} 
} 
}); 
$.include('../js/jquery-ui-1.8.21.custom.min.js'); 
$.include('../css/black-tie/jquery-ui-1.8.21.custom.css');

Write this function into a common.js file and load the common.js file in html to achieve the goal.
Note:
1. In html5, the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag no longer supports the language attribute, so I deleted it:

var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' ";

language='javascript' in

2. When the original author wrote js and css tags, he used:

document.write("<" + tag + attr + link + "></" + tag + ">");

But after practice, I found that the document.write() method will clear all the contents of the original page before writing, which is equivalent to overwriting. This obviously does not meet my needs. I need to dynamically load the page. Importing common js and css to the page, but not clearing any other content of my original page, so I checked the api and I used it instead:

$("head").prepend("<" + tag + attr + link + "></" + tag + ">");

This method, the $("head").prepend() method is used to append content to the front end of the 93f0f5c25f18dab9d176bd4f6de5d30e tag.

Finally, add another method, which is also implemented through common js. It should be easier to understand than the above method:

Dynamically loading external JavaScript and CSS files 

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