This doesn't work in IE8. I think it's the innerHTML that causes the problem. How to solve?

// jQuery plugin
(function( $ ){

    $.fn.someThing = function( options ) {  

        var d = document,
            someThingStyles = d.createElement('style');

        someThingStyles.setAttribute('type', 'text/css');
        someThingStyles.innerHTML = " \
        .some_class {overflow:hidden} \
        .some_class > div {width:100%;height:100%;} \
        ";
        d.getElementsByTagName('head')[0].appendChild(someThingStyles);

        });

    };

})( jQuery );

This doesn't work in IE8. I think it's the innerHTML that causes the problem. How to solve?

// jQuery plugin
(function( $ ){

    $.fn.someThing = function( options ) {  

        var d = document,
            someThingStyles = d.createElement('style');

        someThingStyles.setAttribute('type', 'text/css');
        someThingStyles.innerHTML = " \
        .some_class {overflow:hidden} \
        .some_class > div {width:100%;height:100%;} \
        ";
        d.getElementsByTagName('head')[0].appendChild(someThingStyles);

        });

    };

})( jQuery );

• javascript
• internet-explorer
• innerhtml

• 2 Who uses style and jquery that way? use classes and\or .css – gdoron Commented Feb 12, 2012 at 16:24
• 1 Why do you use pure JS with jQuery? jQuery was made to get around cross-browser issues like this. – JJJ Commented Feb 12, 2012 at 16:25
• you are missing var and ; var d = document; var someThingStyles = d.createElement('style'); – gdoron Commented Feb 12, 2012 at 16:25
• @gdoron: It can be very useful to dynamically generate style rules. Also, you can define multiple variable with one var statement, which the OP is already doing. – Tim Down Commented Feb 12, 2012 at 16:26
• 7 @gdoron - What? Javascript lets you assign a list of vars via var and , so var x = 1, y = 2, z = 3; is a totally valid declaration. – zellio Commented Feb 12, 2012 at 16:33

3 Answers 3

jQuery

Since you're already using jQuery, use:

 $('<style type="text/css">' + 
   '.some_class {overflow:hidden}' +
    '.some_class > div {width:100%;height:100%;}' +
    '</style>').appendTo('head');

Pure JavaScript

If you don't want to use jQuery, you have to first append the <style> element, then use the style.styleSheet.cssText property (IE-only!!).

var d = document,
    someThingStyles = d.createElement('style');
d.getElementsByTagName('head')[0].appendChild(someThingStyles);
someThingStyles.setAttribute('type', 'text/css');

someThingStyles.styleSheet.cssText = " \
.some_class {overflow:hidden} \
.some_class > div {width:100%;height:100%;} \
";

If you weren't using jquery, IE before version 9 writes to a style element by assigning a css string to the styleelement.styleSheet.cssText.

Other browsers (including IE9+) let you append text nodes to the element directly.

function addStyleElement(css){
  var elem=document.createElement('style');
  if(elem.styleSheet && !elem.sheet)elem.styleSheet.cssText=css;
  else elem.appendChild(document.createTextNode(css));
  document.getElementsByTagName('head')[0].appendChild(elem); 
}

You should check out the CSSOM (CSS Object Model) spec - http://dev.w3.org/csswg/cssom/

You will probably be interested in the cssText property of CSSRule objects - http://dev.w3.org/csswg/cssom/#dom-cssrule-csstext