Home/ Questions/Q 943011
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T22:22:02+00:00

This question occurred to me after a user named patrick pointed out an error

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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