.after()

Syntax

.after(content): content: An element, HTML string, or jQuery object to insert after each matched element
.after(function): function: A function that returns an HTML string to insert after each matched element

Return value

The jQuery object, for chaining purposes.

Description

Insert content specified by the parameter after each element in the set of matched elements.

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.

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

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.

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

Results:

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

Add after text node created from document.createTextNode

 
<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> a</p><b>b</b>
  </body>
</html>

Click to view the demo

Add after paragraph

 
<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> a</p><b>b</b>
  </body>
</html>

Click to view the demo

Add after text node

 
<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>
         <b>b</b>
         <p>p</p>
    </body>
</html>

Click to view the demo

Use after to switch node

 
<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") );
        });
    </script>
  </head>
  <body>
    <body>
         <b>b</b>
         <p>p</p>
  </body>
</html>

Click to view the demo