Webtech Walker

HTML5の新要素をjQueryでappendとかするとIEでバグる件

jQueryでsectionとかarticleとかをappendしたときにstyleが反映されなかったという話しを聞いたので調べた&検証してみたメモ。

デモつくった

調べてみたところ、定義されていない要素をinnerHTMLしてappendChildすると、以下の例の場合IE8以下では開始タグ、テキストノード、終了タグの3つの要素として追加されるとのこと。(html5shivは読み込んでます)

var div = document.createElement('div');
div.innerHTML = '<section>section</section>';
document.getElementById('box').appendChild(div);

以下のようにcreateElementすればいける。

var div = document.createElement('div');
var section = document.createElement('section');
section.innerHTML = 'section';
document.getElementById('box').appendChild(section);

同じ理由でjQueryのappendがダメになるみたい。

$('#box').append('<section>section</section>');

こうすればいけるっぽい。

$('#box').append( $('<section>').text('section') );

あと、innershiv.jsというのがあって、これを使うといけるみたい。

var div = document.createElement('div');
div.appendChild( innerShiv('<section>section</section>') );
document.getElementById('box').appendChild(div);

jQueryのappendもおk。

$('#box').append( innerShiv('<section>section</section>') );
このエントリーをはてなブックマークに追加