Difference Between append() and after() in JQuery

In JQuery there are two methods append() and after() which is look alike similar but there is a little bit of difference between them. Let’s see the difference:

1. append(): append method inserts the data at the end of its last child element.

Example:

<!DOCTYPE html> 
 <html> 
 <head> 
 </head> 
   
 <body> 
 <div class='main'> 
   <div class='child'>child</div> 
 </div> 
   
   
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 <script> 
 $('.main').append($('<div class="lastchild">last child</div>')); 
 </script> 
 </body> 
 </html> 
   


Check this Example in Inspect Mode You will see the output like this :

This div: 
 
<div class="lastchild">last child</div>

Will be added after this div
<div class='child'>child</div>  


2. after():
This method inserts data after the selected element.

Example:

<!DOCTYPE html> 
 <html> 
 <head> 
 </head> 
   
 <body> 
 <div class='main'> 
   <div class='child'>child</div> 
 </div> 
   
   
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 <script> 
 $('.main').after($('<div class="lastchild">last child</div>')); 
 </script> 
 </body> 
 </html>


Check this Example in Inspect Mode You will see the output like this :

This div:
<div class="lastchild">last child</div>
Will be added after this div
<div class='main'>child</div>  

Categories: web designing jquery

Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 20 Days

Crash : 7 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 7 Month

Fastrack : 4 Month

Crash : 2 Month

Related Blogs

Request For Demo