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

Question

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

Answer 1

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

Answer 2

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.