Dynamically append external CS/JS after loading

[leitning]

I wrote a rather complicated image gallery application that I want to be able to AJAX into other pages. All the code imports fine but I need to append external CSS and JS files to the page in order for it to work.

 

Is it possible to append an external CSS or Javascript file to the head after the initial page has been loaded? In other words to have the following script in the content that is AJAXed in?

 

var extCSS = document.createElement('link');
extCSS.setAttribute('rel', 'stylesheet');
extCSS.setAttribute('type', 'text/css');
extCSS.setAttribute('href', 'test.css');
document.getElementsByTagName('head')[0].appendChild(extCSS);