« User stylesheet in IE
AJAX-MCV in Russian »

Dynamic SCRIPT and STYLE elements in IE

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");
if (ss1.styleSheet) {   // IE
    ss1.styleSheet.cssText = def;
} else {                // the world
    var tt1 = document.createTextNode(def);
    ss1.appendChild(tt1);
}
var hh1 = document.getElementsByTagName('head')[0];
hh1.appendChild(ss1);

Post this entry to: » del.icio.us  » Digg  » Furl  » Newsvine  » reddit  » Y!

This entry was posted on Friday, January 26th, 2007 and is filed under JavaScript, firefox, browsers, ie. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Somewhat related posts

9 Responses to “Dynamic SCRIPT and STYLE elements in IE”

  1. All in a days work… Says:
    January 28th, 2007 at 8:16 pm

    […] Dynamic SCRIPT and STYLE elements in IE - Going conditional on the text attribute For IE you can use the text property instead of creating a text node. Creating a text node with the stylesheet body will work in Firefox. For IE, the type attribute, it’s absolutely required here. So with a bit of object sniffing, we get a x-browser solut (tags: DOM JavaScript) […]

  2. ash Says:
    April 28th, 2007 at 12:17 am

    Thank you so much!!
    I've tried to solve this problem for so long, trying to find the way to dynamically add script and style tags during the ajax-application work.
    Now it works in IE too.

  3. Thamizh Says:
    August 4th, 2007 at 6:15 am

    hey ash,

    For me IE is having some problem. how did you solve your problem. please share your idea with me

    Thanks

  4. Taras Says:
    August 24th, 2007 at 2:33 am

    Unbelievable, this helped me so much :) Thank you guys!!!!!!!!

  5. Thamizharasu Says:
    September 27th, 2007 at 3:51 am

    I have a calendar field. which is having one text field and one calendar icon. with this i have a attached with the image. Text field id and icon id is attached in the script variables.

    So if you click the image, DHTML caledar box will be opened.

    Now let me come to the real problem. i have plus icon. if i click the plus icon i need to add one more set of calendar.

    I am adding this new calendar through javascript. In Firefox this is working. but in IE this is not working. new calendar is coming but if i click the icon, DHTML calendar popup is not loaded.

    can any one solve my problem.

  6. Hacking at 0300 » Blog Archive » Ajax, Style elements and Safari Says:
    October 2nd, 2007 at 1:42 am

    […] I looked up a few ways to include a <style> element, but realized there’s an easier way; I split the style into its own stylesheet and added a line to Javascript: $('head').append('<link type="text/css" href="/css/kb.css" rel="stylesheet" >'); before the $('<div id="keyboard-holder">').insertAfter('#q').load('/inc/keyboard.html'); // load via Ajax and now the style loads dynamically and easily. Luckily, jQuery handles identifying and executing <script> elements in Ajax’ed code, so I don’t have to pull that out. […]

  7. EnderÐS Says:
    January 21st, 2008 at 2:04 pm

    Thanks a whole lot, this help me immensely. I dynamically insert a javascript function into web page using greasemonkey and have spent three days trying to port it to IE and Reify's Turnabout until I found this. Thanks again.

  8. Mike Says:
    March 26th, 2008 at 8:52 am

    Your IE Style trick really helped me out, I was getting desperate after trying every other standard/non-standard way! Just a quick note, script.text is actually standard http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-81598695 and works in Safari & Opera as well. It is nice not to have to fork the code on IE for scripts at least…

Leave a Reply