web-dev-qa-db-ja.com

jQuery：append（）vs appendTo（）

次のコードを使用して、jQueryの.append() vs .appendTo()メソッドをテストしています。

_$('div/>', {
    id : id,
    text : $(this).text()
    }).appendTo('div[type|="item"]#'+id);
$('div[type|="item"]#'+id).append($(this).text());
_

セレクターは.appendTo()と.append()で同一ですが、後者は（同じページ内で）動作しますが、前者は動作しません。どうして？

このタイプの（複雑な）セレクターで.appendTo()を使用するにはどうすればよいですか？ 2つの方法の補間方法は異なりますか？欠落している構文はありますか？

投稿を無意味なコードで煩雑にしたくありません：.append()メソッドが望ましい結果を生み出していることから明らかなように、セレクターによって参照される要素が存在すると言うだけで十分です。さらに情報が必要な場合はお知らせください。

ありがとう！

jqueryjquery-selectorsjquery-append
27
Yevgeniy

appendは、作業中のオブジェクトにパラメーターを追加します。

appendToは、作業中のオブジェクトをパラメーターに追加します。

詳細はこちら： http://api.jquery.com/appendTo/

それとは別に、ここで何か間違っています：

$('div/>',

これは何も選択していません。

23
René Wolferink

私は同様の質問に直面し、調査でさらに洞察を得ました。ターゲットや要素などを聞くのはわかりにくいので、外側のセレクタを$ containerとして視覚化し、要素を$ widgetとして追加することを好みます。平易な英語で、ウィジェットをコンテナに追加したいです。 appendとappendToの両方を次の方法で使用すると、まったく同じ結果が得られます。

$container = $("#containerdiv");

$widget = $("<div> <h1 id='title'> widget </h1> </div>")

アプローチ1：$container.append($widget)

アプローチ2：$widget.appendTo($container)

主な違いは返されるものです。前者の場合は$ containerが返され、後者の場合は$ widgetが返されます。これは、リクエストを別のjqueryステートメントでチェーンする場合に役立ちます。 $ containerを使用する場合は、最初の構成を使用し、ウィジェットを使用する場合は2番目の方法を使用します。例えば、

コンテナに2つのウィジェットを追加したい場合は、

$container.append($widget1).append($widget2)

ウィジェットを追加し、ウィジェットのタイトルを「クールウィジェット」とする場合は、次のようにします。

$widget.appendTo($container).find('#title').text("Cool Widget")

5
Kannan J

両方のメソッドは同じタスクを実行します。主な違いは-

  • 構文固有に、
  • コンテンツとターゲットの配置。

.append()の場合、メソッドの前のセレクター式は、コンテンツが挿入されるコンテナーです。

一方、.appendTo()を使用すると、セレクタ式またはオンザフライで作成されたマークアップとしてコンテンツがメソッドの前に置かれ、ターゲットコンテナに挿入されます。

2
Zigri2612

この2つを理解しやすくするため。

A B C 3つの注文されたチャーターがあるとします。

A append CはAの前にCを移動することを意味し、これはCではなくAの再配置をもたらすため、CAB =。

A appendTO CはCの後にAを移動することを意味し、これはAではなくCの再配置の結果であるため、BCA =。

  • appendと 'appendTo'は両方とも甲と丙と同じ結果になりますが、3つのチャーターの順序はすべて変わります。
  • OOO.appendTo（XXX）の再配置のため、このコントロールの前にXXXが存在する必要があります。
1
Wang Zhou

$('#someDiv').append(someStuff); someStuff.appendTo($('someDiv')); //ここで同じ結果、あなたのシッチに応じて異なる方法を実行します

1
user1142121

.append()メソッドは、指定されたコンテンツをjQueryコレクションの各要素の最後の子として挿入します（それを最初の子として挿入するには、.prepend()）を使用します。

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

1
Umang Patwa

結果を返すが唯一の違いであり、メソッドチェーンでappendToをより便利にします：

$("<div>...</div>").appendTo(target).hide();  //hide new-element, not the whole target
0
MetNP

.append（）および.appendTo（）メソッドは同じタスクを実行し、挿入される構文およびターゲットのHTMLコンテンツのみが構文を変更します。 http://api.jquery.com/appendTo/ を通過します

0
user2949337