Question

在一位名叫帕特里克的用户在我今天早些时候给出的答案中指出错误后，我想到了这个问题。

给出以下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（内容） content 要在匹配元素集中的每个元素末尾插入的元素，HTML字符串或jQuery对象。

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

它似乎就像我应该看到两个文本块都被添加到div中，但实际上只添加了使用append添加的文本块，因此页面看起来像：

原文

追加新文字

任何人都可以向我解释为什么会这样吗？

Answer 1

.add(html)只是将元素添加到jQuery对象（此时它是一个文档片段），它不会将它插入到DOM中：）

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

例如，如果你这样做，.add()会产生你想到的效果：

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

执行以下操作：

通过选择器

id="div1"

向该jQuery对象的匹配元素集添加一个新的文档片段，现在它是2个元素长
将两者追加到<body>

Answer 2

.add（）会添加它，但为了显示它，我们需要在链中添加一个插入方法。

Answer 3

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

试试这个：

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

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

您最终应该得到一个包含匹配#div和.myClass的对象的jQuery对象。它基本上将两个jQuery对象一起添加。它不会将这些对象附加/插入DOM中。

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

Answer 4

add没有将元素/ html添加到页面，它将它添加到jQuery对象集。查看文档：{{3}}。它有一个段落。

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

4 个答案: