Dynamically insert Javascript and CSS

Here is simple example given for dynamically insert javascript and CSS. Stop loading heavy js and css files for manage UI in different browser or for different pages.

In some cases we need to add different cases in css and js files for browser specific Firefox, IE, Safari, Opera, etc., Because of this file becomes large and it result in slow page load. You can manage this by simple and handy dynamic script insert code.

Coding flow for insert Javascript and CSS is simple 5 step code. i.e.,

#step 1: Get dom head object
#step 2: Create script/link element
#step 3: Add type/rel
#step 4: Set file src/href and media
#step 5: Append script/link element to head

Dynamically insert Javascript:

var headEle = document.getElementsByTagName("head")[0];         
var scriptEle = document.createElement('script');
scriptEle.type = 'text/javascript';
scriptEle.src = '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js';
headEle.appendChild(scriptEle);

Dynamically insert CSS:

var headEle = document.getElementsByTagName("head")[0];
var cssEle = document.createElement('link');
cssEle.type = 'text/css';
cssEle.rel = 'stylesheet';
cssEle.href = 'example.css';
cssEle.media = 'screen';
headEle.appendChild(cssEle);