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

Question

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

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

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

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>

С другой стороны, 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>

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

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

Answer 9

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

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

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

1. before () против insertBefore ()
2. append () против appendTo ()
3. prepend () против prependTo ()
4. и after () против insertAfter (), очевидно.

Демонстрационная версия

Если вы хотите увидеть и то, и другое, то производительность after() выше, чем insertAfter() См. after-vs-inserttafter-performance .

Answer 10

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