为什么追加在这里工作，但添加不？

问题描述：

在我今天早些时候给出的答案中，一位名为帕特里克的用户指出了一个错误后，发生了这个问题。为什么追加在这里工作，但添加不？

鉴于下面的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>

和jQuery的API文档：

.append（内容）内容的元件，HTML字符串，或jQuery对象在末尾插入匹配元素集合中的每个元素。

.add（html） html要添加到匹配元素集合的HTML片段。

它似乎我应该看到被添加到div双方的文本块，但是只使用实际上添加追加添加的一个，所以页面看起来像：

原文

从追加的新文本

任何人都可以向我解释为什么这是？

答

.add(html)只是增加元素到jQuery对象（这是在这一点上的文档片段），它并没有将其插入到DOM :)

.append()是用于不同的目的，它实际上将内容添加到匹配元素作为他们的子项，而.add()它是兄弟，只在该jQuery对象内，而不在DOM中。

例如，如果你这样做，.add()将有大约你想的效果：

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

这将执行以下操作：

通过选择获取id="div1"元素
将新的文档片段添加到该jQuery对象的一组匹配元素中，现在它的长度为2个元素
追加他们两人到<body>

比我的回答更好:) – 2010-07-22 21:09:09

那么在你的例子中，我最终会得到原始的div，并添加了新的段落的副本，这是正确的吗？ – heisenberg 2010-07-22 21:29:16

@kekekela - 更正，如果'.appendTo（选择器）'的选择器匹配多个元素，被附加的其他元素被克隆，这里是一个例子：http://jsfiddle.net/nick_craver/AdX5A/所以第一个原来，第二个是这个集合的克隆。 – 2010-07-22 21:40:49

答

的。新增（）确实增加了，但为了它出现，我们将需要添加的插入方法链中的一个。

答

.add()将匹配元素添加到匹配元素集合并返回一个新的jQuery集合。

试试这个：

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

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

你应该用含配套#div和.myClass对象的jQuery结束。它基本上添加了两个jQuery对象。它不会将这些对象追加/插入到DOM中。

如果您将HTML传递给.add()，您将最终创建这些元素并将它们添加到add所返回的集合中。

答

add不会将元素/ html添加到页面，而是将其添加到jQuery对象集中。查看文档：http://api.jquery.com/add/。它有一个这样的段落。

嗯所以，我想我应该读完整个页面，而不是仅仅在顶部的blurb。 – heisenberg 2010-07-22 21:27:38

是的，jQuery文档倾向于潜入底部的有用信息。你应该读一个'bind'。 – 2010-07-23 02:00:59

为什么追加在这里工作，但添加不？

相关推荐