The jQuery add() method can be used to add elements to the existing group of elements. It can add the specified element to the whole document, or to just inside the context element if specified.
Syntax
The syntax of this method is given below:-
Description of the Parameters
The description of these parameters is given below.
| Parameter Name | Description |
|---|---|
| selector | Specify the element to select and add elements. You can use the element tag name, class name, or id to select. It is a required field. |
| selectElement | It can be an HTML element, jQuery object, or selector expression to add to the existing specified element. It is a required field. |
| Context_point | Specify the point to match with the selector expression. It is an optional field. |
jQuery add() Method to Add Element
If you have a group element and want to add elements to it, you have to use the jQuery add() method. The below example contains the paragraph, div, span, and em elements. The method first adds the element and after that applies the CSS to it.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $("p").add("div").add("span").css("color","orange"); }); }); </script> <p>This is paragraph element.</p> <div>Welcome to TutorialDeep!</div> <span>Learn jQuery from TutorialDeep</span> <em>Check live examples to learn each skill.</em><br><br> <button type="button" class="mybtn">Click to Add</button> |
Output
This is paragraph element.
Learn jQuery from TutorialDeep
Check live examples to learn each skill.
When you click the button given above, it adds the specified elements and applies the orange color to them. The italic content remains in the same state as it is not specified to add.
You may also like to read
I hope you like this tutorial on jQuery add() method. If you have any queries regarding the tutorial, please comment below.
References