add method in jQuery with example

Home » jQuery Methods » add method in jQuery with example

add method in jQuery with example

Posted by 20Fingers2Brains on Tags: jQuery Methods

1. add() method add elements to a set of matched elements.
2. add() method constructs a new jQuery object, combining existing object and the one passed into add method.

Example 1 :

        
        <html>
        <head>
        <title>add</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myButton").click(function () {
                    var target = $("#target");
                    $("#target").add($("#anchor")).css({ 'color': 'Orange', 'font-size': '30px' });
                });
            });
        </script>
        </head>
        <body>
        <a id="anchor" href="http://20fingers2brains.blogspot.in/">20 brains and 2 Fingers</a>
        <div id="target">
        This is div
        </div>
        <input type="button" id="myButton" value="Click ME"/>
        </body>
        </html>

Demo :

In the above examples, we have a div and an anchor element. On button click, we are selecting div using id selector and by using add() method, we are creating a new object which is union of div and anchor element. Finally we are applying CSS to it. CSS will be applied to combination of objects. So add() method can be used to combine objects so that operations can be performed on combine objects.

Example 2 :

        
        <html>
        <head>
        <title>add</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var css = {
                    'font-family': 'comic sans ms', 
                    'font-weight': 'bold', 
                    'font-size': '24px'
                          };
                $("#OnlyDiv").click(function () {
                    $("div").css(css);
                });
                $("#OnlyUl").click(function () {
                    $("ul").css(css);
                });
                $("#Both").click(function () {
                    $("div").add("ul").css(css);
                });
                $("#reset").click(function () {
                    location.reload();
                });
            });
        </script>
        </head>
        <body>
        <div>List of Players</div>
        <ul>
        <li>Thierry Henry</li>
        <li>Cesc Fabregas</li>
        <li>Jack Wilshere</li>
        <li>Santi Cazorla</li>
        <li>Thomas Vermaelen</li>
        </ul>
        <input type="button" id="OnlyDiv" value="Only Div" />
        <input type="button" id="OnlyUl" value="Only ul" />
        <input type="button" id="Both" value="Both (Using Add)" />
        <input type="button" id="reset" value="Reset" />
        </body>
        </html>

Demo :

In the above examples, we have created a div and unordered list. We have also created 4 buttons. On click of each button, we are performing different operations.
This helps to understand how and why we should use add() method. When we click "Only Div" button it changes CSS for only Div element. When we click "Only ul" button it changes CSS for only ul, but when we click "Both (Using Add)" button, we select div using element selector and add ul object to it and apply CSS to combination of Div and ul.

Example 3 :

<html>
<head>
<title>adding element</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $(":button").click(function (e) {
            var element = e.target.id;
            $('#target').add(element).css("color", "aqua");
        });
    });
</script>
</head>
<body>
<div id="target">This is Div element. Div is our target Element.</div>
<p>This is paragraph element.</p>
<b>This is bold element.</b>
<h3>This is h3 element.</h3>
<span>This is span element.</span><br /><br />
<input type="button" id="p" value="Add p to target"/>
<input type="button" id="b" value="Add b to target"/>
<input type="button" id="h3" value="Add h3 to target"/>
<input type="button" id="span" value="Add span to target"/>
<input type="button" value="Back To Normal" onclick="location.reload()" />
</body>
</html>

Demo :

In the above example, we have created few elements on the page and respective buttons. We have set element name as button's id. On click of each button, the div element is selected and the element respective to the button click is added to the target div object, a new object is created and CSS is applied to the combination of elements using add() method.

Watch Video :