A simple jquery code for loading js and css dynamically _ jquery

Jquery for dynamic loading of js and css can be used to load common js and css files through js functions when pages are generated, you can refer to the next simple jquery code for loading js and css dynamically. It is used to load 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 ? "link" : "script"; var attr = isCSS ? " type='text/css' rel='stylesheet' " : " type='text/javascript' "; var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'"; if ($(tag + "[" + link + "]").length == 0) $("head").prepend("<" + tag + attr + link + ">
 "); } } }); $.include('../js/jquery-ui-1.8.21.custom.min.js'); $.include('../css/black-tie/jquery-ui-1.8.21.custom.css');

Write the function into a common. js file and load the common. js file in html.
Note:
1. In html5, the script tag does not support the language attribute anymore, So I deleted it:

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

Language = 'javascript 'in'
2. When writing js and css labels, the original author uses:

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

However, after practice, we found that document. the write () method clears all the content of the original page before writing, which is equivalent to overwriting, which obviously does not meet my needs, I need to dynamically import common js and css to the page when loading the page, but cannot clear any other content on my original page. So I checked the api and switched:

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

This method $ ("head"). prepend () is used inThe front-end of the tag.

Finally, we can 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?6.1.3", "js") //dynamically load and add this .js file loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file loadjscssfile("mystyle.css?6.1.3", "css") ////dynamically load and add this .css file