jQuery add Method Examples
“jQuery add” can be very confusing concept to understand, especially when you just came to know of it . So if you have just heard about it or wish to know more about it, this article is for you. In this article, I am going to share with you very easy examples for understanding jQuery .add() method. Read on to find out more.
How to use the jQuery add method
Ok so let’s jump right in and see how to use the add method in jQuery. In order to make it easy for you to understand how the .add() method works, try out the demo above first. When you do so, you will notice that it works a bit differently than expected.
Syntax of add method:
.add()
Example 1: Using the add method in jQuery to add a div to an existing div with pre-existing class
<style type="text/css">
#my_div1 {
background-color: #3C6;
border: 1px solid #090;
}
.custom_class {
background-color: #FC9;
border: 1px solid #F90;
}
</style>
<div id="my_div1">This is my existing Div 1.</div>
<div id="my_div2">This is my existing Div 2.</div>
<input type="submit" name="sbt_add2div" id="sbt_add2div" value="Add Div only to DIV 1">
$('#sbt_add2div').on("click", function(e){
$("#my_div1").add("div").addClass("custom_class");
e.preventDefault();
});In the above example, we have 2 divs namely “my_div1” and “my_div2”. When the button “Add Div only to DIV 1” is clicked, our expectation is that the div will be added only to “my_div1”. Correct? Well, partially. But not completely. When the button is clicked, jQuery hunts to find all matching elements as that of the element that is being added. In this case, a div is being added. So all the divs that are present in the page body will be modified.
So what exactly happens is that instead of adding a new div, only the properties associated with addition of the new div will be applied. In this case, we are adding a class called “custom_class” to the new div. So this class will be applied to “my_div1” & “my_div2” as well. You can see this change because the background color & border color of the existing divs will be automatically modified. “my_div1” does not appear to change because it already has a green background to it. But in reality, the “custom_class” class is being applied to it as well. We have specified the green background in our css & hence it is taking precedence over the styles mentioned by the “custom_class” and hence it does not appear to change. This is much more apparent in case of “my_div2” as you can clearly see the orange background.
In case you haven’t understood this so far, do not worry. In the following example, everything will be clear.
Example 2: Using the add method in jQuery to add a paragaph to an existing paragraph
<style type="text/css">
.custom_class {
background-color: #FC9;
border: 1px solid #F90;
}
</style>
<p id="para1">This is a Paragraph 1.</p>
<p id="para2">This is a Paragraph 2.</p>
<input type="submit" name="sbt_add2p" id="sbt_add2p" value="Add Div only to PARAGRAPH 1">
$('#sbt_add2p').on("click", function(e){
$("#para1").add("p").addClass("custom_class");
e.preventDefault();
});Ok so in this example, we have 2 paragraphs with ID “para1” and “para2”. Now let’s try to add a new paragraph to an existing para and also append “custom_class” to the new paragraph in the process. When you click the “Add Div only to PARAGRAPH 1” button in the demo, you will notice that even though we are trying to add a new paragraph to “para1” it automatically gets added to “para2” as well. We can say this because it obvious that the background color of both these paragraphs are changing to orange color and this orange color background belong to “custom_class” class.
Example 3: Using the add method in jQuery to add a div to an list item
<style type="text/css">
#my_div1 {
background-color: #3C6;
border: 1px solid #090;
}
.custom_class {
background-color: #FC9;
border: 1px solid #F90;
}
</style>
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
<input type="submit" name="sbt_add2li" id="sbt_add2li" value="Add Div only to LIST ITEM">
$('#sbt_add2li').on("click", function(e){
$("li").add("div").addClass("custom_class");
e.preventDefault();
});Simply try the demo & click on the “Add Div only to LIST ITEM” button. You will notice that the new div will be added to all list items plus all the divs in the document. So I hope it’s clear how jquery .add() method works.
Here’s the complete source code:
<html>
<head>
<title>jQuery example for using add() method</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
#my_div1 {
background-color: #3C6;
border: 1px solid #090;
}
.custom_class {
background-color: #FC9;
border: 1px solid #F90;
}
</style>
</head>
<body>
<div id="my_div1">This is my existing Div 1.</div>
<div id="my_div2">This is my existing Div 2.</div>
<p id="para1">This is a Paragraph 1.</p>
<p id="para2">This is a Paragraph 2.</p>
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
<input type="submit" name="sbt_add2div" id="sbt_add2div" value="Add Div only to DIV 1">
<input type="submit" name="sbt_add2p" id="sbt_add2p" value="Add Div only to PARAGRAPH 1">
<input type="submit" name="sbt_add2li" id="sbt_add2li" value="Add Div only to LIST ITEM">
<br>
<input type="button" name="sbt_reset" id="sbt_reset" value="Reset everything">
<script type="text/javascript">
$(document).ready(function(){
$('#sbt_add2div').on("click", function(e){
$("#my_div1").add("div").addClass("custom_class");
e.preventDefault();
});
$('#sbt_add2p').on("click", function(e){
$("#para1").add("p").addClass("custom_class");
e.preventDefault();
});
$('#sbt_add2li').on("click", function(e){
$("li").add("div").addClass("custom_class");
e.preventDefault();
});
//Reset the divs back to their original state
$('#sbt_reset').on("click", function(){
location.reload();
});
});
</script>
</body>
</html>That’s it!
Do you know of any other ways to use the jQuery add method? Feel free to share by commenting below.