javascript - $fn.insertAfter() および $fn.after() Jquery

Question

$fn.insertAfter()引数として指定された要素の後に要素を挿入するために使用されることを理解しています。それとどう$fn.after()違うの？

Answer 1

$.fn.after()^helpは、呼び出し先のターゲット要素の後に要素を挿入します。

$('div').after('<div>new div</div>');

一方、$.fn.insertAfter指定したノードの後に​​ターゲット要素を挿入します。

$('<div>new div</div>').insertAfter($('#someid'));

新しく作成された要素への参照を保持し、さらに多くのメソッドをチェーンできるため、後者が主に好まれます。たとえば、次のようになります。

$('<div>new div</div>')
   .insertAfter($('#someid'))
   .attr('foo', 'bar')
   .css({
      'background-color': 'red'
   });

可能です。.after()^helpでそれを行うことはできません。.append()^help / .appendTo()^helpと.insertBefore()^help / ^helpも同じです.before()

Answer 2

これは同じものの例です。違いはセレクターのコンテキストです。insertAfterパラメータの後に選択した要素を挿入します 選択した要素の後にパラメータを after挿入します。

$('<div id="foo"></div>').insertAfter('#bar');
$('#bar').after('<div id="foo"></div>');

Answer 3

ドキュメントから直接引用：

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

Answer 4

これは、同じタスクを実行しますが、構文が異なることを示しています。