大笨鳥的私房菜

最近在寫一個 JavaScript 元件，該元件需要即時寫入一個 css style 到畫面上，當下的想法很簡單，就是 create 一個 style 物件，然後把 css code 用 innerHTML 的方式插入 style 物件，最後 append 到 document.body 上，如下：
 
    var style = document.createElement("STYLE");
    style.type = 'text/css';
    style.innerHTML = ".errorArea {color : red}";
    document.body.appendChild(style);
 
在 Firefox 上，這段程式碼能夠被完美的執行，但是在 IE 上卻會丟出執行期錯誤的訊息，後來找出的原因竟然是出在 style.innerHTML 上，也就是無法在自己產生的 style tag 裏用 innerHTML 插入 css code，但吊詭的是在 M$ 官方的 MSDN 上，卻明白列出 style element / object 是有 innerHTML 這個方法的。
 
期間嘗試過 create 一個 div 物件，將 style code 連同 tag 一同塞入 div ，然後再 append 到 document.body，如下：
 
    var div = document.createElement("DIV");
    div.innerHTML = "<style type='text/css'>errorArea {color : red}</style>";
    document.body.appendChild(div);
 
在 IE 上執行的結果雖然不會丟出執行期錯誤，但 css code 也沒發生作用，後來在網路上看到有人建議在 style object 內先 append 一個 comment 物件，然後再 comment 物件內 append 一個 TextNode 物件，然後把 css code 建在 TextNode 裏，但在 IE 上，當 TextNode 一被 append 上去馬上就丟出執行期錯誤的訊息。

最後，找到這篇文章(http://www.quirksmode.org/bugreports/archives/2006/01/IE_wont_allow_documentcreateElementstyle.html)
這串討論串上有不少網友提供方法來解決這個問題，我也一個一個 try，一直試到第14 篇文章時才終於成功，以下是程式碼：
 
    var css  = ".errorArea {color : red}";
    var div    = document.createElement('div');
    div.innerHTML = "<p>x</p><style type='text/css'>" + css + "</style>";
    document.body.appendChild(div.childNodes[1]);
 
這段程式碼相容於 IE 與 Firefox 上，裏面最神奇的是在用 innerHTML 裏插入的 <p>x</p> 這段 html code，表面上看起來似乎是多餘的，但原作者會這麼寫絕對是有原因的，於是我就 <p>x</p> 拿掉，並且把 divChildNodes[1] 改成 divChildNodes[0] ，結果 IE 會丟出「類型不相符」的錯誤，好吧，那不拿掉改放在</style> 後面，當然 divChildNodes[1] 一樣改成 divChildNodes[0]，結果雖然 IE 不丟錯誤了，但這段 css code 卻也沒發生作用，問我為何會是如此？我也不知道，只能說是 IE 的 Bug 吧~~