jQuery add() method

The add() method in jQuery adds an element to the set of existing elements. We can use this method to add the elements inside the context elements if the context parameter is specified, or can use it to add elements in the entire document.

Do not assume that the add() method is used to append the elements to the set of existing elements. This method does not work similar to the append() method. It should not be compared with the append() method.

Syntax

This method accepts two parameters in which one is mandatory and the other is optional. The parameter values of the add() method are defined as follows:

element: It is a mandatory parameter. It can be a jQuery object, a selector expression, an HTML snippet, an element or the set of elements to be added to the set of existing elements.

context: It is an optional parameter. It indicates the point in the document at which the selector starts matching.

Let's understand the add() method using some illustrations.

Example1

It is a simple example of using the add() method. Here we are using the add() method to add the same CSS style for both p and span elements. Here, there are some p elements and some span elements, and both get styled on clicking the given button.

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

<h2> Welcome to the javaTpoint.com </h2>
<h3> It is an example of using the jQuery add() method. </h3>
<p> This is a paragraph element </p>
<p> This is another paragraph element </p>
<h4> Click the following button to see the effect. </h4>
<button> Click me </button> </br> </br>
<span> This is a span element </span> </br> </br>
<span> This is another span element </span> </br> </br>

</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

It is another example of using the add() method. Here, we are using the appendTO() method as well as the add() method in order to specify the comparison between them. There are two buttons named as appendTo and add. When we click the appendTo button, a new element will be inserted, while on clicking the add button, no element will insert.

On every click of the appendTo button, a new paragraph element will be added after the div element.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#b1").click(function(){
  $("<p> Paragraph Element. </p>").appendTo("div");
});
$("#b2").click(function(){
  $("<p> Paragraph Element. </p>").add("div");
});
});
</script>
</head>
<body>

<h2> Welcome to the javaTpoint.com </h2>
<h3> It is an example to show the comparison between jQuery appendTo() method and jQuery add() method. </h3>
<p> On clicking the appendTo button, a new element will be inserted, while on clicking the add button nothing will happen. </p>
<button id = "b1"> appendTo </button> 
<button id = "b2"> add </button>
</br></br>
<div> This is div element </div>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -