Modifying the innerHTML of a <style> element

Question

I am creating a style element and I need to put some CSS into it. The below code works in Chrome, Safari and FF, but fails in IE8:

var styleElement = document.createElement("style");

styleElement.type = "text/css";

styleElement.innerHTML = "body{background:red}";

document.head.appendChild(styleElement);

In IE8, the code fails when it comes to the innerHTML part. I've tried doing:

var inner = document.createTextNode("body{background:red}");

styleElement.appendChild(inner);

But this also fails with "Unexpected call to method or property access." I'm looking for a workaround or fix.

Answer 1

Try to use styleElement.innerText

Answer 2

Use .styleSheet.cssText

NOTE: this seems to be REALLY slow in IE8 compared to modifying individual elements style.

Is there a faster way to modify style sheets dynamically in IE?

This is slow in IE8:

styleElement.styleSheet.cssText = "body{background:red}";

This is also slow in IE8 (assumes the style object to be modified is the 1st style element in the head):

document.styleSheets[0].cssText = "body{background:red}";

This is fast in IE8:

document.body.style.background = "red";