jQuery: What's the difference between after() and insertAfter()

Question

jQuery has an .after() method, and also an .insertAfter() method.

What's the difference between them? I think I can use .after() to insert elements after a selected element (or elements). Is that right? What's .insertAfter() for?

Answer 1

They are mutual opposites.

'after' inserts the argument after the selector.

'insertAfter' inserts the selector after the argument.

Here is an example of the same thing done with:

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>

after():

<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

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

==

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

Answer 3

after( content ) Returns: jQuery

Insert content after each of the matched elements.

insertAfter( selector ) Returns: jQuery

Insert all of the matched elements after another, specified, set of elements.

Answer 4

Check the documentation:

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

is the same as:

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

Answer 5

They are inverses of each other. As explained in the jQuery documentation:

This:

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

Is the same as this:

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

And lastly, insertAfter returns all inserted elements, whereas .after() will return the context it is called on.

Answer 6

All of the answers so far are clear as mud ;-) (So I'll take a stab at it too!)

If you start off with this Html:

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

After inserts some new content after the matching tags:

$("p")                       // Match all paragraph tags
    .after("<b>Hello</b>");  // Insert some new content after the matching tags

The end result is:

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

On the other hand, InsertAfter moves one or more elements which already exist on the DOM after the selected elements (Really, this method could be called MoveAfter):

$("#sMore")                    // Find the element with id `sMore`
    .insertAfter("#pOne");     // Move it to paragraph one

Resulting in:

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

Answer 7

One important things apart some syntax is that memory leak and performance. insertafter is more efficient than insert when you have tons of dom elements. So prefer insertafter instead of after.

Answer 8

( after & before ):

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

while ( insertAfter & insertBefore ):

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

Answer 9

It also seems that passing attributes of the inserted element doesn't work with ".insertAfter", but works with ".after"

works:

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

doesn't work:

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

*edit: seems it doesn't work with ".after" neither, but only with ".appendTo"

Answer 10

After() and Insertafter() both appends an element, the major change will come for chaining

In after() you are appending the new element after your selector and then if you are using chain for the element then any function you used will fire on the selector not on the newly added element, and the opposite will performed in insertAfter() in which the chaining will performed on the newly added element for example,

After() and 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)

See above the selector and contents are changing in both functions. The same will apply on the list of following:

1. before() vs insertBefore()
2. append() vs appendTo()
3. prepend() vs prependTo()
4. and after() vs insertAfter(), obviously.

Live Demo

If you want to see both, performance wise then after() is faster than insertAfter() See after-vs-insertafter-performance.

Answer 11

Here you can find a very very good tutorial of how to add content to a page using the jQuery methods prepend(), prependTo(), append(), appendTo(), before(), insertBefore(), after(), insertAfter(), wrap(), wrapAll() and wrapInner()