.add()

Syntax

.add(selector[, context]): selector: a selector to match additional elements. context (optional): The portion of the DOM tree within which to search.
.add(elements): elements: One or more elements to add to the set of matched elements
.add(html): html: An HTML fragment to add to the set of matched elements

Return value

The new jQuery object.

Description

Add elements to the set of matched elements.

Examples

Add tag returned from document.getElementById

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("p").add(document.getElementById("a")).css("background", "yellow");
        });
    </script>
  </head>
  <body>
    <body>
          <p>Hello</p>
          <p id="a">Hello</p>
  </body>
</html>

Click to view the demo

add(another tag): adds more elements

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("div").add("p").css("background", "yellow");
        });
    </script>
  </head>
  <body>
    <body>
          <div>asdf</div>
          <div>asdf</div>
          <div>asdf</div>
          <div>asdf</div>

    </body>
</html>

Click to view the demo

Add class to the result returned from an add function

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type='text/javascript'>
        var tmpExample = {
          ready : function() {
            $('ul#liClass1 li').add('ul#liClass3 li').addClass('justAdd');
          }
        };
        $(document).ready(tmpExample.ready);
    </script>
    <style type='text/css'>
body {
    font: 16px sans-serif;
}
h3 {
    font-size: 18px;
    margin: 0 0 5px 0;
}
h4 {
    font-size: 16px;
    margin: 5px 0;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul li {
    margin: 1px;
    padding: 3px;
}
li.justAdd {
    background: #88fac6;
}
    </style>
  </head>
  <body id='tmpExample'>
    <ul id='liClass1'>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
    <ul id='liClass2'>
      <li>E</li>
      <li>F</li>
      <li>G</li>
      <li>H</li>
    </ul>
    <ul id='liClass3'>
      <li>I</li>
      <li>J</li>
    </ul>
  </body>
</html>

Click to view the demo