39

当我们有单个元素要添加或附加到容器时，我想知道并且无法获得任何关于 $.add 和 $.append 之间有什么区别的最佳文档。

提前致谢

4

6 回答 6

38

它们根本没有关系。

。添加（）

将元素添加到匹配元素的集合中。

例如

如果你想做，

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

然后，你可以这样做，

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

参考

。附加（）

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

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

将在 domp中的所有选定内容上附加选定内容。div

参考

于 2012-06-05T07:42:57.347 回答
26

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

于 2012-06-05T07:33:02.890 回答
9

。添加（）

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" );

或通过利用来浓缩上述内容。添加（） 

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

。附加（）

将创建一个新元素以添加到 DOM 中，并将作为现有指定元素的子元素出现。

<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>
于 2014-08-28T04:54:01.820 回答
4

添加只是将元素添加到 jquery 对象中，它不会将其添加到 DOM 中

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

于 2012-06-05T07:32:08.657 回答
1

上面的答案很清楚。我只是想再添加一个想法。.add() 似乎是“in ADDition to”的缩写。

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

似乎有同样的效果

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

，而后者是jquery中的Multiple Selector。这是多选择器的链接：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>
于 2020-10-20T18:25:30.650 回答
0

我认为add方法名称可能会产生误导。add并且append完全不同。想象add一下combinedWith——你正在扩展你想用一些 jQuery 函数影响的元素集。

特别是，尽管名称add与remove.

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

所以如果你说

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

您的 p 元素和 id 的元素special都会受到影响。

于 2021-10-12T01:48:30.867 回答