HTML5の新要素をinnerHTMLで生成できないバグを回避する

js enhance IE

IE6〜IE8のinnerHTMLには問題が多く、そのひとつに、HTML5の新要素を食わせると悪夢のようなDOMツリーを生成するというものがあります。

var div = document.createElement("div");

div.innerHTML = "<section>section</section>";
document.body.appendChild(div);

上記のコードを実行すると、body以下にはこのような構造ができてしまいます。

<body>
  <div>
    section
    </SECTION>
  </div>
</body>

どうやら、innerHTML に与える文字列を div でラップし、div要素の前に何か一つ以上のダミーの文字列を設定しておき、あとでアンラップすれば上手くいくようです。

http://jsdo.it/uupaa/IEInnerHTMLBug で試せます。

window.onload = function() {
    document.createElement("section"); // HTML5 siv
    
    var div = document.createElement("div");
    
    div.innerHTML = "<section>section</section>";
    
    alert( div.innerHTML ); // "section</SECTION>" in IE6〜IE8
    
    // 対策するには、
    // ダミーの<div>でラップし、あとでdivを除去します
    if (document.uniqueID) { // is IE
    
        var div = document.createElement("div");
        div.innerHTML = "*<div>" +
                        "<section>section</section>" +
                        "</div>";
        alert( "wrapped div.innerHTML = \n" +
                div.innerHTML );
                
        div = div.lastChild; // unwrap                
        alert( "unwraped div.innerHTML = \n" +
                div.innerHTML );
    }
};