Demo : https://www.lenlop123.com/2020/09/18-append-prepend-before-after-remove.html

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<div id="div_1">This is a paragraph.</div>


<ol id="ol_1">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<br><br>
<img id="img_1" src="https://www.w3schools.com/images/w3jquery.gif" alt="jQuery" width="100" height="140">
<br><br>


<button id="btn_append_text">Append text</button>
<button id="btn_append_item">Append list items</button>
<br><br>

<button id="btn_prepend_text">Prepend text</button>
<button id="btn_prepend_item">Prepend list item</button>
<br><br>

<button id="btn_before">Insert before</button>
<button id="btn_after">Insert after</button>
<br><br>

<button id="btn_remove">remove</button>
<button id="btn_empty">empty</button>
<br><br>

<script>
  // Append text
  $("#btn_append_text").click(function () {
    $("#div_1").append(" <b>Appended text</b>.");
  });

  // Append list items
  $("#btn_append_item").click(function () {
    $("#ol_1").append("<li>Appended item</li>");
  });

  // Prepend text
  $("#btn_prepend_text").click(function () {
    $("#div_1").prepend(" <b>Prepend text</b>.");
  });

  // Prepend list items
  $("#btn_prepend_item").click(function () {
    $("#ol_1").prepend("<li>Prepend item</li>");
  });

  // before
  $("#btn_before").click(function () {
    $("#img_1").before("<b>Before</b>");
  });

  // after
  $("#btn_after").click(function () {
    $("#img_1").after("<i>After</i>");
  });

  // remove
  $("#btn_remove").click(function () {
    $("#ol_1").remove();
  });

  // empty
  $("#btn_empty").click(function () {
    $("#div_1").empty();
  });

</script>