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

Cheeso picture Cheeso · Dec 15, 2009 · Viewed 23.9k times · Source

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

graphicdivine picture graphicdivine · Dec 15, 2009

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>