Question

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

先谢谢

Answer 1

他们完全无关。

.add（）

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

e.g。

如果你想这样做，

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

然后，你可以做到，

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

Reference

.append（）

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

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

会在dom。

中的所有选定p上附加选定的div

Reference

Answer 2

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

Answer 3

<强>。新增（）

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>元素 AND <p>元素的颜色更改为红色，您可以写：

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

或通过利用。添加（）

来缩小上述内容

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

<强> .append（）

将创建要添加到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>

Answer 4

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

中

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

Answer 5

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

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

似乎具有与

相同的效果

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

，而后者是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>

$ .add和$ .append JQuery之间的区别是什么

5 个答案: