私の質問は非常に単純で、主観的なものかもしれません。DOM を操作するときは、ほとんどの場合、HTML テキストを作成して要素に追加します。データが十分に小さい場合は、要素を作成して親要素に追加することがあります。
$("#p").html("<p>My Paragraph</p>");
また
$("<p/>").html("My Paragraph").appendTo("#p");
これらのうちどれを使用する必要があり、その理由は何ですか?
私の質問は非常に単純で、主観的なものかもしれません。DOM を操作するときは、ほとんどの場合、HTML テキストを作成して要素に追加します。データが十分に小さい場合は、要素を作成して親要素に追加することがあります。
$("#p").html("<p>My Paragraph</p>");
また
$("<p/>").html("My Paragraph").appendTo("#p");
これらのうちどれを使用する必要があり、その理由は何ですか?
jQuery には、要素を作成するさらに洗練された方法があります。
var $p = $("<p/>", {
html: "My paragraph"
}).appendTo("#p");
要素を作成する最大の価値は、要素への参照を保存して、必要に応じて使用できることです。$()
セレクターを使用して再度検索する必要はありません。
一方、HTML が非常に単純で、後でこれらの要素にアクセスする必要がない場合は、この.html()
メソッドを使用しても問題ありません。そして、それはわずかに高速です。
ページの構造にもよるので前者の方がいいと思いますが、後者は変更される可能性が高いコンテンツに関係しています。それがあなたが求めているものである場合、私はパフォーマンスについて知りません。
私の謙虚な意見では、2番目のオプションの外観が好きではありません. 意味的には<p/>
、マークアップのどこにも表示されるべきではないので、それを使用するのは奇妙に感じます (DOM に追加される前にデータが取り込まれていることはわかっていますが)。最初の例は、はるかにきれいに見えます。
純粋に好みの問題であり、実際にパフォーマンスの低下を感じるまでは、最適化よりもコードの読みやすさを強く支持します。
のように見える
$("#p").html("<p>My Paragraph</p>");
最速の方法です。http://jsperf.com/jquery-append-order
を参照してください