Q:

Why Does Append Work Here But Add Does Not?

This question occurred to me after a user named patrick pointed out an error in an answer I'd given earlier today.
Given the following html:
<html>
<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

    <script type="text/javascript"> 
        $(function(){  
            $('#div1').add('<p>new text from add</p>');
            $('#div1').append('<p>new text from append</p>');
        });  
    </script>

</head>
<body>
    <div id="div1">
        original text</div>
</body>
</html>

and the jQuery api documentation:
.append( content )
content An element, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.
.add( html )
html An HTML fragment to add to the set of matched elements.
It seems like I should see both text blocks being added to the div, however only the one added using append is actually added, so the page looks like:

original text
new text from append

Can anyone explain to me why this is?

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>

