How Do You Copy An Inline Style Element In IE?

IE does not allow writing to the innerHTML property of style or head elements. So how do you copy a style element from the head of one document to another?

Solution 1:

function copy_style(src_style_tag) {    
    var tmp_div = document.createElement('div');
    var innerHTML = src_style_tag.innerHTML;
    tmp_div.innerHTML = '<p>x</p><style type="text/css">' + innerHTML + '</style>';

    return tmp_div.getElementsByTagName('style')[0];
}

The magic is that you need the <p> tag in the innerHTML of the tmp_div. Without it, IE does not accept the style element.

Solution 2:

If you want to copy some elements, than try using Node.cloneNode(true) together with Node.appendChild