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

Question

В jQuery есть .after() способ, а также .insertAfter() способ.

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

Answer 1

Они являются взаимными противоположностями.

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

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

Вот пример того, как то же самое делается с:

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>

Answer 2

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

Это:

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

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

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

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

Answer 3

Все ответы на данный момент ясны как божий день ;-) (Так что я тоже попробую это сделать!)

Если вы начнете с этого 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>

С другой стороны, Вставить после перемещает один или несколько элементов которые уже существуют в DOM после выбранных элементов (Действительно, этот метод можно было бы вызвать Двигаться после):

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

Answer 4

( после и до ):

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

while ( insertAfter и insertBefore ):

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

Answer 5

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

==

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

Answer 6

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

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

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

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

Answer 7

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

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

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

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

Answer 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');

*редактировать:кажется, это не работает ни с ".after", ни с ".appendTo", а только с ".appendTo".

Answer 9

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

Answer 10

После() и Insertafter() Вставить после () и то, и другое добавляет элемент, основные изменения произойдут при объединении в цепочку

В after() вы добавляете новый элемент после вашего селектора, а затем, если вы используете chain для элемента, то любая функция, которую вы использовали, будет запущена в 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() против insertBefore()
2. append() против appendTo()
3. prepend() против prependTo()
4. и after() против insertAfter(), очевидно.

Живая Демо-версия

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

Answer 11

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