jQuery:の違いについて教えてください後、insertAfter()

Question

jQueryは .after() 方法とともに、 .insertAfter() 方法。

の違いについて教えてください。私は使えるのではないかと思ってい .after() 挿入する要素の後に選択した要素(要素).そんなことがあったのですか。何 .insertAfter() うのですか？

Answer 1

これらは相互に反対している。

'のの後に' 選択した後に引数を挿入します。

'のinsertAfterする' 引数の後にセレクタを挿入します。

ここで行わ同じものの例です。

insertafter（）

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$( "<p>Test</p>" ).insertAfter( ".inner" );
Each inner <div> element gets this new content:
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

の後に（）：

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$( ".inner" ).after( "<p>Test</p>" );

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

Answer 2

彼らはお互いの逆です。 jQueryのドキュメントの中で説明したように：

この：

$("p").insertAfter("#foo");

これと同じです。

$("#foo").after("p");

そして一方.after（）最後に、InsertAfterなどは、すべての挿入要素を返し、それがコールされているコンテキストを戻します。

Answer 3

これまでの泥のように明確である全ての答えが;-)（だから私もそれで刺しを取るよ！）

あなたはこのHTMLを始める場合：

<p id="pOne">Para 1</p>
<p id="pTwo">Para 2 <span id="sMore">More</span></p>

の 後ののいくつかのの新しいを挿入します。のマッチングタグ後のコンテンツます：

$("p")                       // Match all paragraph tags
    .after("<b>Hello</b>");  // Insert some new content after the matching tags

最終的な結果は次のとおりです。

<p id="pOne">Para 1</p><b>Hello</b>
<p id="pTwo">Para 2 <span id="sMore">More</span></p><b>Hello</b>

一方、 InsertAfter にするのが移動一つ又は

：複数の要素は、すでに（は本当に、このメソッドが呼び出される可能性の MoveAfter のの）選択した要素の後にDOM の上に存在するを

$("#sMore")                    // Find the element with id `sMore`
    .insertAfter("#pOne");     // Move it to paragraph one

に結果の

<p id="pOne">Para 1</p><span id="sMore">More</span>
<p id="pTwo">Para 2</p>

Answer 4

（後＆前）：

$('selector').after('new_content');
$('selector').before('new_content');

一方（insertAfterとのinsertBefore）：

$('new_content').insertAfter('selector');
$('new_content').insertBefore('selector');

Answer 5

$("p").insertAfter("#foo");

==

$("#foo").after("p")

Answer 6

ドキュメントするます：

$("#foo").after("p")

と同じです

$("p").insertAfter("#foo");

Answer 7

（コンテンツ）が返した後：jQueryの

マッチした要素のそれぞれの後に内容を挿入します。

insertAfter（セレクタ）戻り値：jQueryの

要素の指定、セット、別の後にマッチした要素のすべてを挿入します。

Answer 8

また、挿入された要素の属性を渡すと「.insertAfter」で動作しないようですが、「.after」

で動作します

働きます：

$('#element').after('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' });

は動作しません。

$('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' }).insertAfter('#element');

*編集：それはどちらもが、唯一 ".appendTo"

と ".after" では動作しませんようです

Answer 9

ここでは、追加する方法の非常に非常に良いチュートリアルを見つけることができますをjQueryのメソッドプリペンドを使用してページへのコンテンツ（）、prependTo（）、追加（）、appendTo（）、（）の前に、のinsertBefore（）、（）の後に、insertAfterなど（）、（ラップ）、wrapAll（）とwrapInner（ ）

Answer 10

After() や Insertafter() の両方を追加する要素の大きな変更されているチェーン

に after() きを添付して新しい要素の後にセレクターとしてご利用の場合はチェーンの要素のその他の機能を使用しますの selector ではなく、新たに追加された要素の逆行 insertAfter() のチェーンまでを行い、新たに追加された要素、例えば、

After() や InsertAfter()

HTML

<div class="after">After Div</div>
------------------------------------------------------
<div class="insertafter">Insert after div</div>

スクリプト

var p='<p>Lorem ipsum doner inut..</p>';
$('.after').after(p)//chaining, performed on .after div not on p
           .css('backgroundColor','pink');
           //you can chain more functions for .after here


$(p).insertAfter('.insertafter')//chaining, performed on p not on .insertafter div
    .css('backgroundColor','yellow');
    // here you can chain more functions for newly added element(p)

上記を参照の selector や contents 変化することで、双方の機能.において同様としますの下

1. 前の()vs insertBefore()
2. append()vs appendTo()
3. 誤動作防止)()vs prependTo()
4. 後の()vs insertAfter()にある.

ライブデモ

を確認したい場合には、性能的にし after() よりはるかに高 insertAfter() 見 後vs-insertafter性能.

Answer 11

いくつかの構文離れて一つの重要な事柄は、メモリリークとパフォーマンスという点です。 あなたはDOM要素のトンを持っているときinsertafterは、挿入よりも効率的です。だからではなく、後のinsertafter好むます。