我想知道,当我们有一个单独的元素要添加或追加到容器中时,$.add和$.append之间有什么区别,但我找不到最佳文档。
提前致谢。
提前致谢。
它们完全没有关联。
.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
元素。
.add()
将元素添加到DOM中…” 那么,它是插入到DOM中还是没有插入? - chharvey.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" );
$( "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>
Add方法只是将元素添加到jQuery对象中,而不会将其添加到DOM中。
Append方法将元素作为子元素添加到DOM中。
$('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>
我认为add
方法名可能会误导。 add
和append
是非常不同的。将add
视为类似于combinedWith
- 您正在扩展要使用某些jQuery函数影响的元素集。
特别是,尽管名称为add
,但它根本不是remove
的相反。
正如其他人所说,add
不会影响页面的外观,而append
可能会。
因此,如果您说
$('p').add('#special').css('background-color', 'yellow');
你的两个 p 元素和 id 为 special
的元素都会受到影响。