bug 143 - createTextNode() doesn't work on the style tag in IE

Issue: #143
Affects: IE6, IE7, IE8

Using the DOM to generate elements is ideal, but when you want to generate a style tag, you can't use the DOM methods to populate it in IE.

Example:

<script type="text/javascript">
  var styleTag = document.createElement('style');
  styleTag.appendChild( document.createTextNode('.foo {color:#ff0000;}') );
  var bodyTag = document.getElementsByTagName('body')[0];
  bodyTag.appendChild( styleTag );
</script>

In all browsers except IE, this will append a style element to the page, with the style definition for the "foo" class as the content.

Known Workarounds: One. For IE, we have to divert from the spec., and use the styleTag.styleSheet.cssText property instead.

Example Workaround Code:

<script type="text/javascript">
  var styleTag = document.createElement('style');
  styleTag.styleSheet.cssText = '.foo {color:#ff0000;}';
  var bodyTag = document.getElementsByTagName('body')[0];
  bodyTag.appendChild( styleTag );
</script>

Related Issues: (bug 142).