Add and move element in jQuery

<div style="height: 100px;width: 140px;display: inline-block;">
  <div id="targetAddBefore" style="background-color: yellow">.prepend()</div>
  <button id ="addBefore">add "text" before</button>
</div>
<div style="height: 100px;width: 140px;display: inline-block;">
  <div id="targetMoveBefore" style="background-color: yellow">.prependTo()</div>
  <div id="elementMoveBefore">text</div>
  <button id ="moveBefore">move "text" before</button>
</div>
<div style="height: 100px;width: 140px;display: inline-block;">
  <div id="targetAddAfter" style="background-color: yellow">.append()</div>
  <button id ="addAfter">add "text" after</button>
</div>
<div style="height: 100px;width: 140px;display: inline-block;">
  <div id="elementMoveAfter">text</div>
  <div id="targetMoveAfter" style="background-color: yellow">.appendTo()</div>
  <button id ="moveAfter">move "text" after</button>
</div>
<script>
  $("#addBefore").click(function() {
    $("#targetAddBefore").prepend("<div>text</div>");
  });
  $("#moveBefore").click(function(){
    $("#elementMoveBefore").prependTo("#targetMoveBefore");
  });
  $("#addAfter").click(function(){
    $("#targetAddAfter").append("<div>text</div>");
  });
  $("#moveAfter").click(function(){
    $("#elementMoveAfter").appendTo("#targetMoveAfter");
  });
</script>