【jQuery】 IEでhtml5要素を含む文字列をappend()するとcssが適応されない問題を解決！
どういうことかというと。
【jQuery】html5要素を含む文字列をappend(), とは以下のこと。
$("ul").append("<li><article>俺のスタイル貫くぜ</article></li>");
こうするとarticle要素のcssが適応されていない！（ IE8 or lower )
ちなみに、
おんなじappendでもjQueryオブジェクトをappend、
$("ul").append( $(document.createElement("li")).append( $(document.createElement("article")).text("俺のスタイル貫くぜ") ) );
これは、うまくいく。
appendChild自体はうまくいくかどうかやってみるんだけど、
var html5Element = document.createElement("article"); html5Element.innerHTML = "俺のスタイル貫くぜ"; $("ul").get(0).appendChild( document.createElement("li").appendChild(html5Element) );
これもうまくいく。
article部分だけ文字列にしてみると、
$("ul").append( $(document.createElement("li")).append('<article>俺のスタイル貫くぜ</article>') );
うまく行かない。（cssのスタイルが適応されない！スタイル貫けや。）
ということはやっぱり、
IEでhtml5要素を含む文字列をjQueryのappendしたときにcssが適応されない
のだ。
番外編として
$("ul").get(0).innerHTML='<article>俺の(ry</article>';
とか
$("ul").get(0).innerHTML='<ARTICLE>俺の(ry</ARTICLE>';
とかはちゃんとcssスタイル適応された。
※ちなみにhtml5.jsというのをつかってます。これによってIEでもhtml5要素を描画できるようになるはずなのです。
原因
この原因をさぐろーとして、jQueryの中身を見てみた。(jQuery-1.4.2)
jQueryは、jQuery.clean() というメソッドでhtml文字列をDOMに変換している。
その方法は、おおざっぱに書いちゃうとこんな感じ。
/* 実際のjQueryのソースではない！けど、ソースの4447行目ぐらいの話 */ var div = document.createElement("div"); div.innerHTML = elementString; // elementStringてのは文字列表現のhtml. "<li>aiu</li>"とか。 var elems = div.childNodes; // このelemが変換後のDOMElementsである！
IEだと
$("ul").get(0).appendChild(elems[0]);
でうまくいかなかった。
