jQuery 中的 add() 方法表示将一个元素添加到现有元素的集合中。

语法

$(selector).add(element,context)

参数

此方法接受两个参数，其中element是必须的，context是可选的。 add()方法的参数值定义如下:

  • element:是必填参数。它可以是 jQuery 对象、选择器表达式、HTML 片段、元素或要添加到现有元素集的元素集。
  • context: 它是一个可选参数。它表示文档中选择器开始匹配的点。

例子

例1

这里我们使用 add() 方法为 p 和 span 元素添加相同的 css 样式。

<!DOCTYPE html>
<html>
<head>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"> </script>
<script>
$(document).ready(function(){
	$("button").click(function(){
	    $("p").add("span").css({"background-color": "yellow", "border": "2px dashed blue"});
	});
});
</script>
</head>
<body style="width:360px;">

<h2> 欢迎来到 yxjc123.com </h2>
<h3> 这是一个使用 jQuery add() 方法的例子。 </h3>
<p> 这是一个段落元素 </p>
<p> 这是另一个段落元素 </p>
<h4> 点击下面的按钮查看效果。 </h4>
<button> 点击看效果 </button> <br>
<span> 这是一个span元素 </span> <br>
<span> 这是另一个span元素 </span> <br>

</body>
</html>

例2

<!DOCTYPE html>
<html>
<head>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"> </script>
<script>
$(document).ready(function(){
$("#b1").click(function(){
  $("<p> 段落元素 </p>").appendTo("div");
});
$("#b2").click(function(){
  $("<p> 段落元素 </p>").add("div");
});
});
</script>
</head>
<body>

<h2> 欢迎来到 yxjc123.com </h2>
<h3> JQuery appendTo() 方法和 jQuery add() 方法区别例子。 </h3>
<p> 单击 appendTo() 按钮时，将插入一个新元素，而单击 add() 按钮时则不会发生任何事情。 </p>
<button id = "b1"> appendTo </button>
<button id = "b2"> add() </button>
<br><br>
<div> 这是 div 元素 </div>
</body>

</html>