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もおｋ。

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