[解決済み】jQuery .html() vs .append()

質問

空のdivがあるとします。

<div id='myDiv'></div>

これですか。

$('#myDiv').html("<div id='mySecondDiv'></div>");

と同じです。

var mySecondDiv=$("<div id='mySecondDiv'></div>");
$('#myDiv').append(mySecondDiv);

解決方法は？

jQueryのメソッドにHTMLの文字列を渡すと、必ずこのような現象が起こります。

一時的な要素が作成され、それをxと呼ぶことにする。 innerHTML には、渡したHTMLの文字列がセットされる。次にjQueryは、生成された各ノード（つまり、xの childNodes を新しく作成したドキュメントフラグメントに移し、次回以降のためにキャッシュします。そして、そのフラグメントの childNodes を新しい DOM コレクションとして提供します。

jQueryはクロスブラウザチェックや様々な最適化を行っているため、実際にはもっと複雑であることに注意してください。たとえば、単に <div></div> を jQuery() を実行すると、jQueryはショートカットして、単に document.createElement('div') .

EDIT : jQueryが実行する膨大な量のチェックを見るには、以下を参照してください。 こちら , こちら そして こちら .

innerHTML は おおむね の方が高速に処理できますが、常にこの方法で処理するわけではありません。 element.innerHTML = ... -- 前述したように、多くのチェックと最適化が行われています。

正しいテクニックは、状況によって大きく異なります。同じ要素を大量に作りたい場合、一番避けたいのは、反復するたびに新しいjQueryオブジェクトを作成する大規模なループを作成することです。例：jQueryで100個のdivを作成する最速の方法。

jQuery(Array(101).join('<div></div>'));

また、読みやすさやメンテナンスの問題も考慮する必要があります。

これです。

$('<div id="' + someID + '" class="foobar">' + content + '</div>');

... は たくさん これよりメンテナンスが大変です。

$('<div/>', {
    id: someID,
    className: 'foobar',
    html: content
});