Adding multiple inline styles to the head with DOM and JavaScript

Question

Hello,

I use dom to add inline styles directly to the head of a web page via Javascipt. The function goes like this:

// Create internal style sheet
function createStyle(styleText, styleName) {
  // Create the node
  var cssNode = document.createElement('style');
  cssNode.type = "text/css";
  cssNode.rel = "stylesheet";
  cssNode.title = styleName;
  // Add style node to head
  document.getElementsByTagName("head")[0].appendChild(cssNode);
  // Add the text
  // IE first
  if(cssNode.styleSheet) {
    cssNode.styleSheet.cssText = styleText;
  // W3C follow
  } else {
    var cssTextNode = document.createTextNode(styleText);
    cssNode.appendChild(cssTextNode);
  }
}

The styleText is a CSS text loaded via synchronous Ajax. I do this because I want to know when CSS is loaded and loading it via DOM as an external CSS file does not allow that. The browser loads it asynchronously and I am screwed.

This all works fine.

But my problem is this. When I add second such inline style in the head it goes there, but do not apply to elements. I can see it in Firebug as a style but in calculated styles for the elements - everything from the second style is missing.

This behaviour is in Firefox 3.6 latest version. IE8 works fine but it does not use the DOM. Chrome bugs even worse, but I have not investigated exactly how, only saw that my page looks very strange. I am not sure about Opera, but I think it is the same as FF.

Please, can you tell me if I am doing something wrong here?