jQuery .insertAfter() inserts elements after target element

Syntax and Description

.insertAfter(target)

Insert every element in the set of matched elements after the target. target is a selector, element, HTML string, or jQuery object; the matched set of elements will be inserted after the element(s) specified by this parameter.

The return value is the jQuery object, for chaining purposes.

Consider the following HTML code:


<div class="container">
 <h2>Header</h2>/*from  w  ww  .j a  v a  2s .  c om*/
 <div class="inner">Hello</div>
 <div class="inner">InnerText</div>
</div>

The following code creates content and inserts it after several elements at once.


$('<p>Test</p>').insertAfter('.inner');

The results would be:


<div class="container">
 <h2>Header</h2>//from   w  w  w  . ja v  a  2  s  .  com
 <div class="inner">Hello</div>
 <p>Test</p>
 <div class="inner">InnerText</div>
 <p>Test</p>
</div>

The following code selects an element on the page and inserts it after another.


$('h2').insertAfter($('.container'));

The results are:


<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">InnerText</div>
</div>//from w ww.  j a  v  a2  s .  c  o  m
<h2>Header</h2>

Insert after paragraph

The following code inserts some HTML after all paragraphs.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from  w  ww.j a va 2  s.  c o m-->
           $("p").after("<b>Hello</b>");
        });
   </script>
  </head>
  <body>
    <body>
         <p>java2s.com</p>
    </body>
</html>

Click to view the demo

Insert a cloned element

Insert cloned object


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--   w ww .j  a  v a 2s.  co m-->
              $("b").clone(true).insertAfter("p");
        });
    </script>
  </head>
  <body>
    <body>
       <b>Hello</b><p>, how are you?</p>
    </body>
</html>

Click to view the demo

Insert selected elements

The following code selects paragraph and then selects a div and then does the insertion.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!-- w w w  .j av a  2s . c  o  m-->
            $("p").insertAfter("#foo");
        });
    </script>
  </head>
  <body>
    <body>
         <p>a</p><div id="foo">b</div>
  </body>
</html>

Click to view the demo

Insert a hard coded element

The following creates HTML elements on the fly and then inserts it after #followMe.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   www.  ja v a  2s .c  om-->
            $("<p>Hi there!</p>").insertAfter("#followMe");
        });
    </script>

  </head>
  <body>
    <body>
        <p id="followMe">Follow me!</p>
    </body>
</html>

Click to view the demo

.after vs .insertAfter

The reverse of $(A).after(B)


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--  ww w .  j  a v  a2 s.co m-->
          $("p").insertAfter( $("b") );
        });
    </script>
  </head>
  <body>
    <body>
         <p>java2s.com: </p>
         <b>java2s.com</b>
    </body>
</html>

Click to view the demo





















Home »
  jQuery »
    jQuery Tutorial »




Basics
Selector
DOM
Event
Effect
Utilities