CODEWITHSUNDEEP
javascriptjquery
Zahid Riaz
Zahid Riaz

Reputation: 2889

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

Upvotes: 40

Views: 27510

Answers (6)

Concrete Gannet
Concrete Gannet

Reputation: 580

I think the add method name could be misleading. add and append are quite different. Think of add as something like combinedWith - you are expanding the set of elements that you want to affect with some jQuery function.

In particular, despite the name add is not at all the opposite of remove.

As others have said, add will not affect the appearance of the page, and append probably will.

So if you say

$('p').add('#special').css('background-color', 'yellow');

both your p elements and the element with an id of special will be affected.

Upvotes: 0

H.Li
H.Li

Reputation: 33

The answers above are pretty clear. I just want to add one more thought to it. .add() seems to be an abbreviation of "in ADDition to".

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

seems like have the same effect as

$('p, div').css('background-color','yellow');});

, while the latter is the Multiple Selector in jquery. Here is the link to Multiple Selector: https://api.jquery.com/multiple-selector/

the complete code to play with:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- import jquery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
    <p>paragraph one</p>
    <div>div second</div>
    
    <script>
    
        $(document).ready(function() {
            $('p').add('div').css('background-color', 'yellow');
            //$('p, div').css('background-color','yellow');
        });

    </script>
</body>
</html>

Upvotes: 1

Kamran Ali
Kamran Ali

Reputation: 5954

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.

Upvotes: 27

tismle
tismle

Reputation: 101

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

Upvotes: 9

Jashwant
Jashwant

Reputation: 29005

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

Upvotes: 39

Porco
Porco

Reputation: 4203

Add just adds the element to the jquery object, it does not add it into the DOM

Append adds the element into the DOM as the child.

Upvotes: 4

Related Questions