.insertAfter()

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>//  w w w .j a v a 2s  .  com
 <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>/*w ww  .  j av  a  2s  .co m*/
 <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 www .j a va2s.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(){<!--  w  w  w. ja 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

The code above generates the following result.

.insertAfter()

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  w  w .  ja va 2 s .  c  om-->
              $("b").clone(true).insertAfter("p");
        });
    </script>
  </head>
  <body>
    <body>
       <b>Hello</b><p>, how are you?</p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.insertAfter()

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(){<!--from ww  w . j  a  va 2  s.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

The code above generates the following result.

.insertAfter()

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(){<!--  w  w w  . j av a2  s.  co  m-->
            $("<p>Hi there!</p>").insertAfter("#followMe");
        });
    </script>

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

Click to view the demo

The code above generates the following result.

.insertAfter()

.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(){<!--  www  . jav a  2 s . c  o  m-->
          $("p").insertAfter( $("b") );
        });
    </script>
  </head>
  <body>
    <body>
         <p>java2s.com: </p>
         <b>java2s.com</b>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.insertAfter()