JQuery: какая разница между after() и insertAfter()

Ответ 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>

Ответ 2

Они являются обратными друг другу. Как объясняется в документации jQuery :

Это:

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

То же самое:

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

И, наконец, insertAfter возвращает все вставленные элементы, тогда как .after() вернет контекст, который он вызывает.

Ответ 3

Все ответы до сих пор ясны, как грязь;-) (Так что я тоже ударю на него!)

Если вы начинаете с этого Html:

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

After добавляет новое содержимое после соответствующих тегов:

$("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 после выбранные элементы (действительно, этот метод можно было бы назвать 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>

Ответ 4

(после и до):

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

while (insertAfter и insertBefore):

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

Ответ 5

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

==

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

Ответ 6

Проверьте документация:

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

совпадает с:

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

Ответ 7

after (content) Возвращает: jQuery

Вставить содержимое после каждого из согласованных элементов.

insertAfter (селектор) Возвращает: jQuery

Вставить все согласованные элементы за другим, указанным, набором элементов.

Ответ 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');

* edit: похоже, что он не работает с ".after", но только с ".appendTo"

Ответ 9

Здесь вы можете найти очень хорошее руководство по добавлению контента на страницу с использованием методов jQuery prepend(), prependTo(), append(), appendTo(), before(), insertBefore(), after(), insertAfter(), wrap(), wrapAll() и wrapInner()

Ответ 10

После() и Insertafter() оба добавляет элемент, основное изменение придет для цепочки

В after() вы добавляете новый элемент после вашего селектора, а затем, если вы используете цепочку для элемента, то любая функция, которую вы использовали, будет срабатывать на selector не на вновь добавленном элементе, а наоборот будет выполнена в insertAfter(), в котором цепочка будет выполняться на вновь добавленном элементе, например,

After() и InsertAfter()

HTML

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

SCRIPT

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 изменяются в обеих функциях. То же самое относится к следующему:

• before() vs insertBefore()
• append() vs appendTo()
• prepend() vs prependTo()
• и после() vs insertAfter(), очевидно.

Live Demo

Если вы хотите видеть, как производительность, так и after() быстрее, чем insertAfter() См. after-vs-insertafter-performance.

Ответ 11

Одной важной особенностью некоторых синтаксисов является утечка памяти и производительность. Вставка более эффективна, чем вставка, когда у вас есть тонны элементов dom. Поэтому предпочитайте вставлять позже, а не после.