Q:

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

I was wondering and couldn't get any best documentation that what's the difference between $.add and $.append when we have single element to add or append to a container.
Thanks in Advance

A:

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

A:

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.

A:

.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>

