そろそろHTML5でコーディングする機会も増えてきたりするかもしれませんが、どうしてもブラウザ対応はしておきたいもの。jQueryで（※）要素をごにょごにょする際にちょっとはまったので一応書いておきます。

IE8以下での話ですが、IE8以下でHTML5を利用するときはHTML5の要素にCSSが適用されないので、html5.jsのようなスクリプトをヘッダで読み込ませたりすると思います。

ちなみに僕はわざわざ読み込むのもアレなので、以下のものを毎回貼ってます。

こんな感じでJavaScriptのcreateElementメソッドでHTML5の要素を追加すれば、CSSが使えるようになって見た目もだいたいばっちりになるんですけど・・・

jQueryで

$(hoge).append('
セクション
')

とか

$(hoge).append([
  '
',
    '
',
      '
',
        '
タイトル
',
        '
サブタイトル
',
      '
',
    '
',
    // hogehoge
    '',
  '
'
].join(''));

とか

hogehogehoge

を

var hogeClone = $('#hoge');
$('body').append(hogeClone);

とか（コードの内容に意味はないです）するとCSSが適用されない訳ですよ。つまりページロード時にはcreateElementで要素を作ってるんだけど、それ以降に新しく追加されたりしたHTML5の要素にはcreateElementしてたやつは効果がないっぽい。

単純に上に書いたようなDOM操作なら、ちょっとめんどいけど

$(hoge).append(document.createElement('section'))

みたいにすればよさそう。でもAjaxでとってきたページにHTML5の要素が含まれててそいつらを追加すると、なんかどうやってもうまくいかなかった。

そんなわけでAjax使うところはHTML5の要素を入れなかったりしてます。でもAjaxなくても毎回createElementとかあほらしいし、そういう処理使う場合はHTML5の要素は使わない方がいいんじゃないですかね。
とか言いながら使いまわせるメソッドとかスニペットとかあればそれでいいのかも。

11:43 追記

対応方法と原因を曖昧にしていた（だめっぽいとかいけるっぽいとか・・・）ので、Webtech Walkerさんの記事へのリンクを追記します。
HTML5の新要素をjQueryでappendとかするとバグる件 – Webtech Walker

jQueryのappend、after等の要素追加メソッドで使うときはinnershiv.jsを利用すればだいたい大丈夫です。

まとめ

つまり何が言いたかったかというと
jQueryぷるぎんって要素をclone()メソッドでコピーしたりなんか色々DOM要素をごにょごにょしたりするやつもあったりするので（僕が作ったやつにもあるんですけど・・・）何気なく使ってる人はそういうこともあるっていう事を知っておかないと、CSSあたらへんねん！意味わからん！とかになったりしそうなので気をつけておかないとなぁーっていうことです。

これくらいはjQueryでネイティブに対応してほしいですね。。

※）jQueryというかJavaScriptですが