$.add和$.append在JQuery中有什么区别？

Question

$.add和$.append在JQuery中有什么区别？

javascriptjquery

39

我想知道，当我们有一个单独的元素要添加或追加到容器中时，$.add和$.append之间有什么区别，但我找不到最佳文档。

提前致谢。

- Zahid Riaz

8

添加：http://api.jquery.com/add/；追加：http://api.jquery.com/append/；进一步解释：添加元素到匹配元素集合中，而追加则是将指定参数的内容插入到匹配元素集合中每个元素的末尾。顺便说一句，我不是一个点赞者 B-) - Tats_innit

2

“找不到更好的文档” - 你在哪里找的？jQuery文档解释得非常清楚... - nnnnnn

1

我已经在互联网上查找过了，是的，JQuery文档解释了这个问题。但并不是每个人都那么技术娴熟，能够理解其中所有的内容。这就是为什么这些论坛存在的原因。@nnnnnn - Zahid Riaz

@MuhammadZahidRiaz，Stack Overflow 帮助那些自助者 :)如果你不理解 jQuery 文档，可以直接在问题中提出。比如说 jQuery 文档中说“blah blah blah...”，但我不明白它是指这个还是那个？ - Jashwant

是的，那是我的错误。我必须提到我没有从JQuery文档中获取这个。 - Zahid Riaz

6个回答

27

给定一个代表一组DOM元素的jQuery对象，.add()方法从这些元素和传递到该方法中的元素的并集构造一个新的jQuery对象。但它不会将元素插入到DOM中，即使用.add()添加元素到DOM中，但要在页面上看到它，您必须使用某些insertion/append方法将其插入到页面中。

- Kamran Ali

3

请进一步澄清一下，你说“…但它不会将元素插入到DOM中，即使用.add()将元素添加到DOM中…” 那么，它是插入到DOM中还是没有插入？ - chharvey

@chharvey +++ 我也没明白 - JustLearn

我认为“添加到DOM”是错误的。更准确的说法是“添加到您打算操作的元素集合中”。 - Concrete Gannet

9

.add()

for example:
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
<p>a random paragraph</p>

要将 <li> 元素和 <p> 元素的颜色改为红色，可以编写以下代码:

$( "li" ).css( "background-color", "green" );
$( "p" ).css( "background-color", "green" );

通过使用add()来压缩上述内容。

$( "li" ).add( "p" ).css( "background-color", "green" );

.append()

此方法会创建一个新元素并添加到指定的现有元素下，作为其子元素。

该方法与DOM相关且与HTML标记无关。保留原有HTML标签。

<div>one</div>
<div>two</div>

<ol>
  <li>item1</li>
  <li>item2</li>
</ol>

$("div").append('<p>');

会导致：

<div>one</div>
<p></p>
<div>two</div>
<p></p>

<ol>
  <li>item1</li>
  <p></p>
  <li>item2</li>
  <p></p>
 </ol>

- tismle

2

为什么每个列表项后面都会添加一个段落呢？它们不是 div。 - chharvey

@tismle：你是不是想把颜色改成“绿色”？另外，Append()的结果是不正确的；使用Append()会添加一个子节点，也就是它会将P元素放在每个div内部而不是之后。 - brooklynsweb

4

Add方法只是将元素添加到jQuery对象中，而不会将其添加到DOM中。

Append方法将元素作为子元素添加到DOM中。

- Porco

1

上面的答案已经很清楚了。我想再补充一个想法。 .add() 似乎是“除此之外”的缩写。

$('p').add('div').css('background-color', 'yellow');

似乎具有相同的效果

$('p, div').css('background-color','yellow');});

前者是CSS选择器，而后者是jquery中的多重选择器。

这里是多重选择器的链接: https://api.jquery.com/multiple-selector/

完整的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- import jquery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
    <p>paragraph one</p>
    <div>div second</div>
    
    <script>
    
        $(document).ready(function() {
            $('p').add('div').css('background-color', 'yellow');
            //$('p, div').css('background-color','yellow');
        });

    </script>
</body>
</html>

- H.Li

0

我认为add方法名可能会误导。 add和append是非常不同的。将add视为类似于combinedWith - 您正在扩展要使用某些jQuery函数影响的元素集。

特别是，尽管名称为add，但它根本不是remove的相反。

正如其他人所说，add不会影响页面的外观，而append可能会。

因此，如果您说

$('p').add('#special').css('background-color', 'yellow');

你的两个 p 元素和 id 为 special 的元素都会受到影响。

- Concrete Gannet

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jashwant · Accepted Answer

它们完全没有关联。

.add()

向匹配元素集合添加元素。

例如：

如果你想要做到，

$('div').css('color':'red');
$('div').css('background-color':'yellow');
$('p').css('color':'red');

然后，你可以这样做：

$('div').css('background-color':'yellow').add('p').css('color':'red');

参考文献

.append()

将由参数指定的内容插入到匹配元素集合中每个元素的末尾位置。

$('div').append('p');

会在 DOM 中的所有选定 div 末尾追加选定的 p 元素。

参考文献