javascript - jQuery を使用した HTML の追加

Question

追加するには非常に多くの方法があります

私は3つの例を持っています:

1. $(".test1").append("<div>content#1</div>");

2. $("<div>content#2</div>").appendTo(".test2");

3. $("<div>", { text : "content#3" }).appendTo(".test3");

おもう

1. 最も簡単です
2. と同じ...
3. は ？？？

どちらをすればよいか教えていただけますか? 悪いこと、良いことを教えてください...

Answer 1

どちらが優れているかよりも、文脈が重要です。

パフォーマンスの違いは、典型的な Web サイトでは見られない、非常に極端な場合にのみ見られます。

つまり、ある要素を別の要素に追加するということです。

との違いは.append()、.appendTo()メソッド チェーンを実行するとすぐに明らかになります。

var $whatIsThis = $(".test1").append("<div>content#1</div>");

$whatIsThisのまま$(".test1")です。

var $whatIsThis = $("<div>content#1</div>").appendTo(".test1");

$whatIsThis代わりに、<div>作成したばかりになります。

---

メソッドチェーンについて言及したように、ここに例があります

この下は非表示になり.test1ます。新しい<div>ものはその中にあるので、どちらも見えなくなってしまいます。

$(".test1") // this is me
    .append("<div>content#1</div>")
    .hide(); // hide me, I'm .test1

以下は、<div>に追加した新しいものだけを非表示にし.test1ます。

.test1内部の他のものはすべて表示され.test1たままにする必要があります。

$("<div>content#1</div>") // this is me
    .appendTo(".test1")
    .hide(); // hide me, I'm the new <div>

Answer 2

append()上記の 3 つのコードはすべて、考慮される限り同じことを行います。appendTo()後で説明するセレクターに追加します。コンテキストの観点から連鎖しているときに、append() と appendTo() の違いに気付くかもしれません。

しかし、動的に作成された要素を考慮すると、私は3番目のものを選びます..それはよりきれいで読みやすいです..

5つ以上のdivを作成する必要があると考えてください..方法1と2で作成すると面倒に見えます

 $(".test1").append("<div>content#1</div><div>aaa</div><div>sss</div>...");

3番目の方法を使用すると、よりクリーンで読みやすくなります..

var div1=$("<div>", { text : "content#3" });
var div2=$("<div>",...); and so on..

Answer 3

append は appendTo よりも高速ですが、大規模な編集の場合のみです。そうでなければ、それは問題ではありません。

Answer 4

.append() および .appendTo() メソッドは同じタスクを実行します。主な違いは構文、特にコンテンツとターゲットの配置にあります。.append() では、メソッドの前にあるセレクター式は、コンテンツが挿入されるコンテナーです。一方、.appendTo() を使用すると、コンテンツは、セレクター式またはオンザフライで作成されたマークアップとしてメソッドの前に置かれ、ターゲット コンテナーに挿入されます。

jqueryのドキュメントによると

したがって、基本的には append() と appendTo() の両方が同じことを行います

個人的には、appendTo() よりも append() の方が好きです。