.insertAfter()

Syntax

.insertAfter(target)

Parameters

target: A selector, element, HTML string, or jQuery object; the matched set of elements will be inserted after the element(s) specified by this parameter

Return value

The jQuery object, for chaining purposes.

Description

Insert every element in the set of matched elements after the target.

Examples

Consider the following HTML code:

 
<div class="container">
 <h2>Header</h2>
 <div class="inner">Hello</div>
 <div class="inner">InnerText</div>
</div>

Create content and insert it after several elements at once.

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

Results:

 
<div class="container">
 <h2>Header</h2>
 <div class="inner">Hello</div>
 <p>Test</p>
 <div class="inner">InnerText</div>
 <p>Test</p>
</div>

Select an element on the page and insert it after another.


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

Results

 
<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">InnerText</div>
</div>
<h2>Header</h2>

Insert cloned object

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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

Inser query after

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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

Creating HTML elements on the fly

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("<p>Hi there!</p>").insertAfter("#followMe");
        });
    </script>
<style>
  div { margin:3px; width:50px; position:absolute;
        height:50px; left:10px; top:30px;
        background-color:yellow; }
  div.red { background-color:red; }

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

Click to view the demo

Inserts some HTML after all paragraphs.

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("p").after("<b>Hello</b>");
        });
   </script>
  </head>
  <body>
    <body>
         <p>asdf</p>
    </body>
</html>

Click to view the demo

Inserts a DOM element after all paragraphs.

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("p").after( document.createTextNode("Hello") );
        });
    </script>
  </head>
  <body>
    <body>
         <p>asdf</p>
    </body>
</html>

Click to view the demo

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

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("p").insertAfter( $("b") );
        });
    </script>
  </head>
  <body>
    <body>
         <p>asdf: </p>
         <b>asdf</b>
    </body>
</html>

Click to view the demo