The Script

<br /> var loadCSS = function(file) {<br /> var link = document.createElement(’link’);<br /> link.href = file;<br /> link.rel = ’stylesheet’;<br /> link.type = ‘text/css’;<br /> document.getElementsByTagName(’head’)[0].appendChild(link);<br /> };</p> <p>var loadJS = function(file) {<br /> var script = document.createElement(’script’);<br /> script.src = file;<br /> script.type = ‘text/javascript’;<br /> document.getElementsByTagName(’head’)[0].appendChild(script);<br /> };<br />

Example 1 – JavaScript

First let’s load up a JavaScript file. Here’s what the external JS file looks like:

<br /> alert(’Loaded!’);<br />

And by using the above script, loading it is easy:

<br /> loadJS(’/assets/misc/dynamic-load/example-1.js’);<br />

Load JS file

Example 2 – CSS

Loading CSS is not much different. Here are the contents of the external CSS file:

<br /> body {<br /> border: 3px solid red;<br /> }<br />

Note that you can also use relative URLs or even files on another server:

<br /> loadCSS(’http://scriptnode.com/assets/misc/dynamic-load/example-2.css’);<br />

Load CSS file

This has been tested and works in all of the standard browsers including
Firefox, Chrome, Internet Explorer, Opera and Safari.