What's the difference between $.add and $.append JQuery

They are not at all related.

.add()

Add elements to the set of matched elements.

e.g.

If you want to do,

$('div').css('color':'red');
$('div').css('background-color':'yellow');
$('p').css('color':'red');

Then, you can do,

$('div').css('background-color':'yellow').add('p').css('color':'red');

Reference

.append()

Insert content, specified by the parameter, to the end of each element in the set of matched elements.

$('div').append('p');

will append selected p on all selected div in dom.

Reference

Given a jQuery object that represents a set of DOM elements, the .add() method constructs a new jQuery object from the union of those elements and the ones passed into the method. But it does not insert the element into the DOM, i.e using .add() the element will be added to the DOM but to see it in the page you have to insert it in the page using some insertion/append method.

.add()

for example:
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
<p>a random paragraph</p> 

to change the color of the <li> elements AND the <p> element to red, you could write:

$( "li" ).css( "background-color", "green" );
$( "p" ).css( "background-color", "green" );

or condensing the above by utilizing .add()

$( "li" ).add( "p" ).css( "background-color", "green" );

.append()

Will create a new element to add to the DOM and will appear as a child to the existing specified element.

<div>one</div>
<div>two</div>

<ol>
  <li>item1</li>
  <li>item2</li>
</ol>

$("div").append('<p>');

will result in:

<div>one</div>
<p></p>
<div>two</div>
<p></p>

<ol>
  <li>item1</li>
  <p></p>
  <li>item2</li>
  <p></p>
 </ol>