In jQuery append() method is used to add particular content at the end of the each element.

In the below example, with the help of append method we will display the current text/content on hover of that.

HTML-

<h2>Hover over the elements</h2>
<ul>
  <li class="link">
    <span>Html</span> <!-- Here we have to hover to see the append method effect -->
  </li>

  <li class="link">
    <span>CSS</span>
  </li>
  
  <li class="link">
    <span>JavaScript</span>
  </li>
</ul>

CSS-

li{
    text-decoration: none; 
    position: relative;
  }
  .hover{ /*styling the position of the element to be shown on hover*/
    position: absolute;
    top: 10px;
    left: 40px;
    background-color: #fff;
    border:1px solid #ccc;
    padding: 5px 10px;
    display: none;
  }
  li.link:hover .hover{ /*displaying the element on hover*/
    display:block;
    z-index: 1;
  }

JavaScript-

$('.link').one('mouseover', function() { // on mouseover of li
     var original = $(this).text();// value/text of li will be saved in variable "original"
        $(this).append('<div class="hover">'+original+'</div>'); //that text will be append on hover div
    });

Below is the link of above code:-