.insertAfter()

In this chapter you will learn:

Syntax and Description for .insertAfter()
Insert after paragraph
How to insert a clone element
Insert a selected element
Insert a hard coded element
.after vs .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>
 <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">/*from j a  v a  2s. c  om*/
 <h2>Header</h2>
 <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>
<h2>Header</h2>

Insert after paragraph

The following code inserts some HTML after all paragraphs.

<html><!--from   java  2  s.  c  o m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("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><!--from   ja va2 s  .  c o m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("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><!--from   j av a2 s  .c o  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("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><!--from   ja v  a2 s  . c om-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("<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><!--from  ja v  a  2s .  com-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("p").insertAfter( $("b") );
        });
    </script>
  </head>
  <body>
    <body>
         <p>java2s.com: </p>
         <b>java2s.com</b>
    </body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter: