爲什麼追加在這裏工作，但添加不？

在我今天早些時候給出的答案中，一位名爲帕特里克的用戶指出了一個錯誤後，發生了這個問題。爲什麼追加在這裏工作，但添加不？

鑑於下面的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雙方的文本塊，但是隻使用實際上添加追加添加的一個，所以頁面看起來像：

原文

從追加的新文本

任何人都可以向我解釋爲什麼這是？

來源

2010-07-22 heisenberg

.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:04:02

比我的回答更好:) – 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

的。新增（）確實增加了，但爲了它出現，我們將需要添加的插入方法鏈中的一個。

來源

2010-07-22 21:07:42

.add()將匹配元素添加到匹配元素集合並返回一個新的jQuery集合。

試試這個：

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

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

你應該用含配套#div和.myClass對象的jQuery結束。它基本上添加了兩個jQuery對象。它不會將這些對象追加/插入到DOM中。

如果您將HTML傳遞給.add()，您將最終創建這些元素並將它們添加到add所返回的集合中。

來源

2010-07-22 21:08:54 gnarf

add不會將元素/ html添加到頁面，而是將其添加到jQuery對象集中。查看文檔：http://api.jquery.com/add/。它有一個這樣的段落。

來源

2010-07-22 21:09:10

嗯所以，我想我應該讀完整個頁面，而不是僅僅在頂部的blurb。 – heisenberg 2010-07-22 21:27:38

是的，jQuery文檔傾向於潛入底部的有用信息。你應該讀一個'bind'。 – 2010-07-23 02:00:59

爲什麼追加在這裏工作，但添加不？

回答

相關問題