55

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

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

4

11 に答える 11

80

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

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

後（）：

<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>
于 2009-12-15T15:39:44.467 に答える
24

それらは互いに逆です。jQueryのドキュメントで説明されているように：

これ：

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

これと同じです：

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

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

于 2009-12-15T15:41:55.167 に答える
14

これまでの答えはすべて泥のようにはっきりしています;-)（だから私もそれを突き刺します！）

この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は、選択した要素の後に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>
于 2009-12-15T15:50:37.987 に答える
12

（ 前後に ）：

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

while（insertAfter＆insertBefore）：

$('new_content').insertAfter('selector');
$('new_content').insertBefore('selector');
于 2013-07-14T21:01:09.860 に答える
5 
$("p").insertAfter("#foo");

==

$("#foo").after("p")
于 2009-12-15T15:40:37.617 に答える
2

ドキュメントを確認してください：

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

と同じです：

$("p").insertAfter("#foo");
于 2009-12-15T15:41:45.180 に答える
1

after（content）戻り値：jQuery

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

insertAfter（selector）戻り値：jQuery

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

于 2009-12-15T15:40:51.970 に答える
1

一部の構文とは別に重要なことの1つは、メモリリークとパフォーマンスです。大量のdom要素がある場合、insertafterはinsertよりも効率的です。したがって、afterではなくinsertafterを優先します。

于 2016-02-01T10:07:52.963 に答える
0

また、挿入された要素の属性の受け渡しは「.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」でのみ機能します

于 2011-04-03T16:55:08.237 に答える
0

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

于 2012-11-16T14:46:22.023 に答える
0

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（）、明らかに。

ライブデモ

両方を確認したい場合は、パフォーマンスの面で、Seeafter-vs- insertafter -performanceafter()よりも高速です。insertAfter()

于 2014-04-07T05:30:06.740 に答える