Cant Create STYLE tag in iframe head

Question

Here's jsfiddle --> http://jsfiddle.net/uTy5j/7/embedded/result/

I'm using CodeMirror and it seems that Codemirror is erasing my style tag that I create with:

var preview = document.getElementById('preview');
var mypreview = preview.contentDocument;
mypreview.open();
mypreview.close();

var style = document.createElement('style');
style.id = 'mycssid';
style.type ='text/css';
mypreview.head.appendChild(style);

Can anyone figure out how I can get this style tag appended to the head of the iframe after everything is loaded?

The jsFiddle has all codemirror scripts and styles loaded in the external resources.

Here's jsfiddle --> http://jsfiddle.net/uTy5j/7/embedded/result/

Answer 1

You just have to wait until the iframe is loaded before you try to insert stuff:

preview.onload = function() {
    var style = document.createElement('style');
        style.id = 'mycssid';
        style.type ='text/css';
        mypreview.head.appendChild(style);
}

FIDDLE