Load HTML, JavaScript and CSS dynamically

Load CSS dynamically

CSS is loaded by creating a style element and attaching it to the head. They way that style elements are attached to the head differs between browser but the code is fairly straight-forward.

Here is an example (make sure to show the developer console).

Load HTML & JavaScript dynamically

Loading HTML is actually trivilial. All you need to to is fetch the HTML with XMLHttpRequest and replace the innerHTML attribute of an element in the DOM. Loading JS is also fairly easy. Here is an example: source. Make sure to open the developer console.


These examples should work in all browsers. It took my quite a bit of testing to make the JavaScript loading work in both the Gecko (Firefox) and Blink/WebKit (Safari and Chrome).

Alternative solutions