setting innerHTML value for <style> does not work in IE7 - css

Question

I'm looking for a way to append styles to my stylesheet dynamically with Javascript.
In today's browsers, I can use this for example:
<style>
#id{background-color:#F00;color:#000;}
</style>
<div ID="id">Test1</div>
<div ID="id2">Test</div>
<script>
document.getElementById('ID').innerHTML+="#id2{color:#00F}";
</script>
The above would change the color of Test from black to blue because of the javascript, but this code does NOT work with older browsers such as Internet Explorer 7.
In Internet Explorer 7, I narrowed the problem down to the fact that it produces a javascript warning symbol at the bottom left corner when it is expected to set the innerHTML value of the style element.
I tried replacing:
document.getElementById('ID').innerHTML+="#id2{color:#00F}";
with:
document.getElementById('ID').appendChild(document.createTextNode("#id2{color:#00F}"));
and I'm still unsuccessful.
I need javascript for this because I want to set the background image for multiple elements at once, and by ramming in CSS code, I can call the image only once. If I used native javascript properties for each element, then I'm going through numerous elements as well as requesting the load of the same element numerous of times, and if IE is bad with caching, then burden will be placed on the server.
What can I do in Javascript to append CSS data to the style element that works with IE 7? I'm looking for something simple.

Answer 1

Well, I went back to the olden days, and managed to pull this off in IE 7:
document.write('<style>'+d+'</style>');
the variable d is the actual rules to insert.
I understand this is a slower method as it creates numerous <style> tags which is bad HTML practice, but the idea works in IE7.