So you know how to add external scripts and styles, using the DOM, after the page is loaded. And what if you don't have external files, but have some style definitions and some JS code as text and you want it inserted and executed into a page.
The DOM way
"Ha! An easy one", you'd say and then go like:
var ss = document.createElement('script'); var scr = 'alert("bah");'; var tt = document.createTextNode(scr); ss.appendChild(tt); var hh = document.getElementsByTagName('head')[0]; hh.appendChild(ss);
"Ha!" in turn says IE, "No way!"
The IE way for SCRIPT
The above won't work in IE, but you can use the text
property instead of creating a text node. Interestingly enough, this also works in Firefox.
var ss = document.createElement('script'); var scr = 'alert("bah");'; ss.text = scr; var hh = document.getElementsByTagName('head')[0]; hh.appendChild(ss);
The IE way for STYLE
STYLE, SCRIPT, what's the difference, they are merely elements of the DOM tree. For the normal browsers, yes, so creating a text node with the stylesheet body will work in Firefox. For IE, you need a workaround.
var ss1 = document.createElement('style'); var def = 'body {color: red;}'; ss1.setAttribute("type", "text/css"); ss1.styleSheet.cssText = def; var hh1 = document.getElementsByTagName('head')[0]; hh1.appendChild(ss1);
Note that while in the SCRIPT case I took the liberty of skipping the type
attribute, it's absolutely required here.
So with a bit of object sniffing, we can get a cross-browser solution:
var ss1 = document.createElement('style'); var def = 'body {color: red;}'; ss1.setAttribute("type", "text/css"); var hh1 = document.getElementsByTagName('head')[0]; hh1.appendChild(ss1); if (ss1.styleSheet) { // IE ss1.styleSheet.cssText = def; } else { // the world var tt1 = document.createTextNode(def); ss1.appendChild(tt1); }
Update: note that it's important for IE that you append the style to the head *before* setting its content. Otherwise IE678 will *crash* is the css string contains an @import. Go figure!