jQuery add() Method

Last Updated:

jQuery add() Method

The jQuery add() method adds elements to an existing group of elements.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery add() Method</h1> <p>Click on the button</p> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ $("h1").add("p").css("color", "red"); }); }); </script> </body> </html>

Syntax

$(selector).add(selector); //or $(selector).add(element); //or $(selector).add(html); //or $(selector).add(selector, context)

Parameter Values

Value Explanation
selector Specifies a string representing a selector expression to find additional elements to add to the set of matched elements.
element Specifies one or more elements to add to the set of matched elements.
html Specifies an HTML fragment to add to the set of matched elements.
context Specifies the point in the document at which the selector should begin matching.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
add()YesYesYesYesYesYesYesYesYesYesYesYesYes

add() at Specific Point

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery add() Method</h1> <p>Click on the button</p> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ $("h1").css("background", "yellow").add("p").css("color", "red"); }); }); </script> </body> </html>

add() with clone()

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery add() Method</h1> <p>Click on the button</p> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ $("p").clone().add("<span>You Clicked</span>").appendTo(document.body); }); }); </script> </body> </html>

Share this Page

Meet the Author