Javascript 为什么附加在这里起作用而添加不起作用？_Javascript_Jquery_Html

Javascript 为什么附加在这里起作用而添加不起作用？

javascript jquery html

Javascript 为什么附加在这里起作用而添加不起作用？,javascript,jquery,html,Javascript,Jquery,Html,在一位名叫patrick的用户指出我今天早些时候给出的答案中的一个错误后，我想到了这个问题给定以下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">

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

给定以下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>


$（函数（）{
$（“#div1”）。添加（“来自添加的新文本”）；
$（“#div1”）.append（“来自append的新文本””）；
});  
原文

以及jQuery api文档：

.append（内容） content要插入匹配元素集中每个元素末尾的元素、HTML字符串或jQuery对象

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

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

原文

追加中的新文本

有人能解释一下为什么会这样吗？

只是将元素添加到jQuery对象中（此时它是一个文档片段），而不是插入DOM:）

是出于不同的目的，它实际上将内容添加到匹配的元素中，作为它们的子元素，而

.add（）

它是一个同级元素，并且只在jQuery对象内部，而不是在DOM中

例如，如果您这样做，将产生与您所想的大致相同的效果：

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

$（“#div1”）.add（“来自add的新文本”）.appendTo（'body'）；

这样做的目的如下：

通过选择器获取
```
id=“div1”
```
元素
向jQuery对象的匹配元素集添加一个新的文档片段，它现在有2个元素长
将它们都附加到

.add（）确实添加了它，但是为了使它出现，我们需要向链中添加一个插入方法。

.add（）

将匹配元素添加到匹配元素的集合中，并返回一个新的jQuery集合
试试这个：

var $div = $("#div"); console.log($div.add('.myClass'));
您应该得到一个jQuery对象，其中包含与
#div
和
.myClass
匹配的对象。它基本上是将两个jQuery对象添加到一起。将这些对象追加/插入到DOM中没有任何作用

如果将HTML传递给
.add（）
，则最终将创建这些元素并将它们添加到add返回的集合。
add
不会将元素/HTML添加到页面，而是将其添加到jQuery对象集。签出文档：。这上面有一个段落。
啊，是这样的，我想我应该读整页，而不仅仅是顶部的导语。是的，jQuery文档倾向于在底部隐藏有用的信息。您应该阅读
bind
。因此，在您的示例中，我将以原始div结尾，并添加一个新段落的副本，对吗？@kekekela-正确，如果
。appendTo（selector）
的选择器匹配多个元素，则其他被追加的元素将被克隆，这里有一个例子：第一个是原始的，第二个是集合的克隆。酷，我想让我困惑的是jQuery文档说add将添加“一个HTML片段以添加到匹配的元素集合”。如果说它将它添加到表示文档片段的jQuery对象中听起来更准确。“@kekela-jQuery对象是一组匹配的元素，一个数组，包含与查询匹配的元素。”
.add（）
添加到“匹配元素集”并返回一个新的集合。@Nick Craver-嘿，我想在JSFIDLE上有一个自定义的子目录——你是怎么做到的？；）