Difference Between Append And Html In JQuery

What does the difference of html() and append() when it comes to jQuery because if I use append() it will display my data in the next line while if I use html() it will just overwr

Solution 1:

$(el).html() replace everything that is inside the selector.

 <div class="el">
      <!-- Everything here gets replaced -->
 </div>

$(el).append() puts inside selector at the end.

 <div class="el">
      [...]
      <!-- appends it here -->
 </div>

$(el).prepend() puts inside selector at the begining.

 <div class="el">
      <!-- preprend it here -->
      [...]
 </div>

$(el).before() puts outside before the selector.

 <!-- appends it here -->
 <div class="el">
      [...]
 </div>

$(el).after() puts outside after selector.

 <div class="el">
      [...]
 </div>
 <!-- appends it here -->