ansaurus

Question

Why Does Append Work Here But Add Does Not?

Answer 1

+4 A:

.add(html) just adds the element to the jQuery object (it's a document fragment at this point), it doesn't insert it into the DOM :)

.append() is for a different purpose, it actually adds the content to the matched elements, as their children, whereas .add() it's a sibling, and only inside that jQuery object, not in the DOM yet.

If for example you did this, .add() would have approximately the effect you're thinking of:

$('#div1').add('<p>new text from add</p>').appendTo('body');

This does the following:

Gets the id="div1" element via a selector
Adds a new document fragment to that jQuery object's set of matched elements, it's now 2 elements long
Appends both of them to the <body>

Nick Craver 2010-07-22 21:04:02

better than my answer :)

Mark Schultheiss 2010-07-22 21:09:09

So in your example I'd end up with the original div, and a copy with the new paragraph added, is that correct?

kekekela 2010-07-22 21:29:16

@kekekela - Correct, if `.appendTo(selector)`'s selector matches more than one element the other elements being appended are cloned, here's an example: http://jsfiddle.net/nick_craver/AdX5A/ So the first one's the original, the 2nd is a clone of the set.

Nick Craver 2010-07-22 21:40:49

Cool, I think the part that confused me is that the jQuery docs say add will add "An HTML fragment to add to the set of matched elements." when it sounds like its more accurate to say that it adds it to the jQuery object representing the document fragment. Or something.

kekekela 2010-07-22 21:43:40

@kekekela - jQuery objects are a "set of matched elements", an array containing the elements matched by your query. `.add()` adds to "the set of matched elements" and returns a new set.

gnarf 2010-07-23 00:19:02

@Nick Craver - hey, I want a custom subdirectory on jsfiddle -- howd you pull that one off? ;)

gnarf 2010-07-23 00:21:40

@gnarf - I think user registration opens publicly soon, keep an eye out :)

Nick Craver 2010-07-23 00:25:56

@gnark - Yeah, but the documentation for append uses the same verbiage, which is what makes it confusing ..."of each element in the set of matched elements." <--- append docs

kekekela 2010-07-23 00:34:31

Answer 2

+1 A:

The .add() does add it, but in order for it to appear, we would need to add one of the insertion methods to the chain.

Mark Schultheiss 2010-07-22 21:07:42

Answer 3

+1 A:

.add() adds matching elements to the set of matched elements and returns a new jQuery set.

Try this:

var $div = $("#div");

console.log($div.add('.myClass'));

You should end up with a jQuery object containing the objects matching #div and .myClass. It basically adds two jQuery objects together. It does nothing to append/insert these objects into the DOM.

If you pass HTML to .add() you will end up creating those elements and adding them to the set returned by add.

gnarf 2010-07-22 21:08:54

Answer 4

+1 A:

add does not add the element/html to the page, it adds it to the jQuery object set. Check out the doc: http://api.jquery.com/add/. It has a paragraph on this.

Jason McCreary 2010-07-22 21:09:10

Ah so it does, guess I should've read the whole page instead of just the blurb at the top.

kekekela 2010-07-22 21:27:38

Yeah, the jQuery doc tends to sneak the useful info in at the bottom. You should read the one for `bind`.

Jason McCreary 2010-07-23 02:00:59

ansaurus

tags:

views:

answers:

Why Does Append Work Here But Add Does Not?

related questions