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>
