web-dev-qa-db-ja.com

jQuery：after（）とinsertAfter（）の違いは何ですか

jQueryには.after()メソッドと.insertAfter()メソッドがあります。

それらの違いは何ですか？ .after()を使用して、選択した1つまたは複数の要素の後に要素を挿入できると思います。そうですか？ .insertAfter()は何のためのものですか？

javascriptjqueryinsertafterjquery-after
45
Cheeso

それらは相互に反対です。

'after'は、セレクターの後に引数を挿入します。

'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>

after（）：

<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>
71
graphicdivine

それらは互いに逆です。 jQueryで説明したように documentation ：

この：

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

これと同じです：

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

最後に、insertAfterは挿入されたすべての要素を返しますが、.after（）は呼び出されたコンテキストを返します。

23
Chris Clark

これまでの答えはすべて泥だらけです;-)（それで私もそれに挑戦します！）

このHtmlから始める場合：

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

Afterは、一致するタグの後にnewコンテンツを挿入します。

$("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は、DOMに既に存在する1つ以上の要素を移動します選択した要素の後（実際には、このメソッドを呼び出すことができますMoveAfter）：

$("#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>
14
Dexter

（ 前後に ）：

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

while（insertAfter＆insertBefore）：

$('new_content').insertAfter('selector');
$('new_content').insertBefore('selector');
12
Hazem_M
$("p").insertAfter("#foo");

==

$("#foo").after("p")
5
Svetlozar Angelov

ドキュメント を確認します。

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

と同じです：

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

after（content）戻り値：jQuery

一致した各要素の後にコンテンツを挿入します。

insertAfter（selector）戻り値：jQuery

一致するすべての要素を、指定された別の要素セットの後に挿入します。

1
just somebody

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

0
warmth

また、挿入された要素の属性を渡すと、「。insertAfter」では機能せず、「。after」では機能するようです。

作品：

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

動作しません：

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

*編集：「.after」でも機能しないようですが、「。appendTo」でのみ機能します

0
bogdan

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. before（）対insertBefore（）
  2. append（）対appendTo（）
  3. prepend（）対prependTo（）
  4. そして、明らかにafter（）対insertAfter（）です。

ライブデモ

両方のパフォーマンスを確認したい場合は、after()の方がinsertAfter()よりも高速です after-vs-insertafter-performance を参照してください。

0
Rohan Kumar

一部の構文の重要な点の1つは、メモリリークとパフォーマンスです。大量のdom要素がある場合、insertafterはinsertより効率的です。したがって、後ではなく挿入後を選択します。

0
sumit sharma