jQuery add()

The jQuery add() method allows you to extend a selection of elements by adding more elements to it. This is useful for dynamically modifying selections and applying changes to multiple elements.

In this tutorial, you will learn about the different syntaxes of the jQuery add() method and how to use them effectively.

Syntax – jQuery add() – 5 Definitions

1 Add elements matching a selector

</>
Copy
.add( selector )

This syntax selects elements that match a given CSS selector and adds them to the current selection.

For example, to add div elements to the current selection of paragraph elements, we can use the add() method as follows:

</>
Copy
$("p").add("div");

2 Add specific DOM elements

</>
Copy
.add( elements )

This syntax adds specific DOM elements to the current selection.

For example, to add a specific div element by its ID to the current selection of paragraph elements:

</>
Copy
$("p").add(document.getElementById("specialDiv"));

3 Add an HTML string as an element

</>
Copy
.add( html )

This syntax allows adding a new HTML element to the selection dynamically.

For example, to add a new div element dynamically:

</>
Copy
$("p").add("<div class='newDiv'>New Element</div>");

4 Add another jQuery selection

</>
Copy
.add( selection )

This syntax allows combining two separate jQuery selections into one.

For example, to combine the selection of p elements with all div elements:

</>
Copy
var divs = $("div");
$("p").add(divs);

5 Adds elements matching a selector within a specific context

</>
Copy
.add( selector, context )

This syntax adds elements that match a selector, but only within a given context.

For example, to add div elements inside the #container to the selection of p elements:

</>
Copy
$("p").add("div", "#container");

Examples – jQuery add()

The following examples demonstrate how to use the add() method with each syntax:

1 Example for using .add( selector )

$("p") selects all the paragraph elements, then .add("div") adds all the divs to the previous selection, and sets their background-color to yellow.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#action").click(function(){
    $("p").add("div").css("background-color", "yellow");
  });
});
</script>
</head>
<body>

<p>Sample paragraph.</p>

<div>Sample div.</div>

<button id="action">Click</button><br><br>

</body>
</html>

2 Example for using .add( elements )

$("p") selects all paragraph elements. Then, .add(document.getElementById("specialDiv")) adds the div element with the ID specialDiv to the selection and sets their background-color to yellow.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#action").click(function(){
        $("p").add(document.getElementById("specialDiv")).css("background-color", "yellow");
    });
});
</script>
</head>
<body>

<p>Sample paragraph.</p>
<div id="specialDiv">Special div.</div>

<button id="action">Click</button><br><br>

</body>
</html>

3 Example – Using .add( html )

The $("p") selects all paragraph elements. Then, .add("<div class='newDiv'>New Element</div>") dynamically adds a new div element and changes the background-color of the selection to yellow.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#action").click(function(){
        $("p").add("<div class='newDiv'>New Element</div>").css("background-color", "yellow");
    });
});
</script>
</head>
<body>

<p>Sample paragraph.</p>

<button id="action">Click</button><br><br>

</body>
</html>

4 Example – Using .add( selection )

$("div") selects all div elements and stores them in a variable. Then, $("p").add(divs) combines the paragraph selection with all divs and changes their background-color to yellow.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#action").click(function(){
        var divs = $("div");
        $("p").add(divs).css("background-color", "yellow");
    });
});
</script>
</head>
<body>

<p>Sample paragraph.</p>
<div>Sample div.</div>

<button id="action">Click</button><br><br>

</body>
</html>

5 Example – Using .add( selector, context )

$("p") selects all paragraph elements. Then, .add("div", "#container") adds all div elements inside the element with ID container to the selection, and changes their background-color to yellow.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#action").click(function(){
        $("p").add("div", "#container").css("background-color", "yellow");
    });
});
</script>
</head>
<body>

<p>Sample paragraph.</p>

<div id="container">
    <div>Div inside container</div>
</div>

<button id="action">Click</button><br><br>

</body>
</html>