jQuery: в чем разница между after () и insertAfter()

jQuery имеет .after() метод, а также .insertAfter() метод.

в чем разница между ними? Я думаю, что могу использовать .after() вставка элемента после выбранного элемента (или элементов). Это правда? Что такое .insertAfter() для чего?

44
insertafter javascript jquery jquery-after

11 ответов

они взаимные противоположности.

'после' вставляет аргумент после селектора.

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

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

Это:

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

то же самое, что и это:

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

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

23

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

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

( после и до ): 

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

while (insertAfter & insertBefore):

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

==

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

Регистрация документация:

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

- это то же, что:

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

после (содержимое ) возвращает: jQuery

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

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

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

1

также кажется, что передача атрибутов вставленного элемента не работает с ".insertAfter", но работает ".после"

работает:

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

не работает:

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

* edit: кажется, он не работает с ".после" ни с тем, ни с другим ".appendTo"

0

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

0

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

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

после() и 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 () vs insertBefore ()
  2. добавить () vs appendTo ()
  3. prepend () vs prependTo ()
  4. и после () vs insertAfter(), очевидно.

Live Demo

если вы хотите увидеть оба, производительность мудрая, то after() быстрее insertAfter() посмотреть после-vs-insertafter-производительность.

0

одна важная вещь, кроме некоторого синтаксиса, - это утечка памяти и производительность. insertafter более эффективен, чем insert, когда у вас есть тонны элементов dom. Поэтому предпочитайте insertafter вместо after.

0