What is the difference between append and after in jquery?

When we use “append” it insert the data inside the element but in the end on that element on which the “append” effect is applied.
And when we use “after” it insert the data after and outside the element on which the “after” effect is applied.What is the difference between append and after in jquery?

When we use “append” it insert the data inside the element but in the end on that element on which the “append” effect is applied.
And when we use “after” it insert the data after and outside the element on which the “after” effect is applied.

For better knowing the difference between append and after below is code.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
 
   $("#btn1").click(function(){
    $("ol").after(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>

<button id="btn1">After text</button>
<button id="btn2">Append items</button>

</body>
</html>

What is the difference between append and after in jquery?expoundsofttechsolution