Element.appendChild() chokes in IE

Question

I have the following javascript:

  css = document.createElement(\'style\');
  css.setAttribute(\'type\', \'text/css\');
  css_data = document.createTextNode(         


        

Answer 1

This is particular with the "style" element, IE doesn't allow the appendChild() method on it.

Answer 2

@crescentfresh

I tried your suggestion, and the content of the style block simply never gets populated. Tried in IE6 and IE7... it just doesn't seem to do anything

Here's my modified code:

function load_content()
{
  var d = new Date();

  css = document.createElement('style');
  css.setAttribute('type', 'text/css');
  if(css.styleSheet) { css.styleSheet.cssText = 'testing'} //Because IE is evil
  else { css_data = document.createTextNode(''); css.appendChild(css_data); } //And everyone else is cool
  document.getElementsByTagName("head")[0].appendChild(css);

  new Ajax.PeriodicalUpdater('content', '/%doc_path%?'+d.getTime(),
  {
    method: 'post',
    frequency: 5,
    onSuccess: function(transport) {
          new Ajax.Request('/%css_path%?'+d.getTime(), {
              method: 'get',
              onSuccess: function(transport) {

                if(css.styleSheet) { css.styleSheet.cssText = transport.responseTex}
                else { 
                    var new_css_data = document.createTextNode(transport.responseText);
                    css.replaceChild(new_css_data, css_data); 
                    css_data = new_css_data;
                } 
              }
          });
    }
  });
}

Any ideas?

Answer 3

Try instead:

var css = document.createElement('style');
css.setAttribute('type', 'text/css');

var cssText = '';
if(css.styleSheet) { // IE does it this way
    css.styleSheet.cssText = cssText
} else { // everyone else does it this way
    css.appendChild(document.createTextNode(cssText));
}

document.getElementsByTagName("head")[0].appendChild(css);

Answer 4

no appendChild() allowed with HTMLStyleElement in I.E.

check it out