
The **`add()` method** is a jQuery method that adds elements or groups of elements to the set of matched elements or the whole document.

 The set of matched elements could be an `element` selector, a `class` selector, or an `id` selector.

When the element is matched, the `add()` method then adds the new elements specified to the new one. 

#    
#  Syntax
```js
$(element_to_match).add(element_to_add, context_param)
```
#    
## Parameters
- **`element_to_add`**: This is the element to add to the matched element.
- **`context_param`**: This is an optional parameter that specifies the point in the document where the selector matching should start.


##   
## Code
In the example below, we used the `add()` method to add a paragraph to an `h3` heading element.


<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        // function to add "p" and "span" elements with add() method
        $("button").click(function(){
            // add "p" and "span" elements and add background-color of yellow
            $("h3").add("p").add("span").css("background-color", "yellow");
        });
    })
    
  </script>
</head>

<body>
  <h3>This is about the add() method</h3>
  <span>This is a span</span>
  <p>This is a paragraph</p>
  <button>Add "p" element</button>
</body>

</html>

codemirror

console

## Explanation
In line 4, the API to use jQuery in the HTML is added.


In the code above, the `p` and `span` elements were added with the `add()` method, and the background color of yellow was added using the `css()` method.

What is add() in JQuery?

The add() method in jQuery adds specified elements to matched elements, using element selectors and optional context parameters.