getting an error in IE8 when dynamically creating style element and appending to it [duplicate]

Question

The code below throws the error Error: Unexpected call to method or property access when I create a style elemnt and attempt to append the code to it:

//This is OK
var styleElement = document.createElement("style");

//This is OK
styleElement.type = "text/css";

//THIS THROWS THE ERROR
styleElement.appendChild(document.createTextNode("a { color: red; }"));

What am I doing wrong?

Answer 1

You have to do it this way in older versions of IE (6-8):

styleElement.styleSheet.cssText = "a { color: red; }";

You can do something like this to support multiple browsers/versions:

var style = "a { color: red; }";

if(styleElement.styleSheet) styleElement.styleSheet.cssText = style;
else styleElement.appendChild(document.createTextNode(style));