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(){
$('#di开发者_JAVA百科v1').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?
.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>
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.
.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.
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.
加载中,请稍侯......
精彩评论