Dynamically loading an external JavaScript or CSS file

< head >
   < link  type ="text/css"  rel ="stylesheet"  href ="style/style.css" />
   < script  type ="text/javascript"  src ="js/jsFile.js" ></ script >
</ head >

We commonly load external javascript (*.js) or css (*.css) file on the page with the above way,doesn't we? Actually, we can make use of javascript and DOM implementing dynamically loading those files.We can use operating DOM method to achieve it.For example, load an external javascript file and an external css file with the following function.

function  requireFile(fileName, fileType) ... {
     var ref;
     if(fileType == "js")...{
           ref = document.createElement("script");
           ref.setAttribute("type", "text/javascript");
           ref.setAttribute("src", fileName);
     }
     if(fileType == "css")...{
            ref = document.createElement("link");
            ref.setAttribute("type", "text/css");
            ref.setAttribute("rel", "stylesheet");
            ref.setAttribute("href", fileName);
     }
     document.getElementsByTagName("head")[0].appendChild(ref);
}

Then. we can use requireFile("js/js.js", "js") to dynamically load js/js.js file or requireFile("style/style.css", "css") to dynamically load style.css file.

That's OK!