.add() JQ Home  <<  Traversal  <<  .add()

• <<    .siblings()
• .addBack()     >>

Matched set joining.

Description

The .add() method is used to add specified elements to the matched set.

• Using the .add() method without any parameters returns a new jQuery object with the same entities as before the .add().

Syntax

Parameters

Return

A new jQuery object containing a union of the existing jQuery Object and the elements added, or if nothing added a new jQuery object with the same entities as before the .add().

.add( selector [, context ] ) ExamplesTraversal  <<  Top

Add specified selector elements to the matched set optionally using a DOM Element, Document, or jQuery object as a context.

In the example below when the left button is pressed we select the list item with an id of 'list1' and add the list item with an id of 'list2' to it. We then and turn the background colour to orange.

When the right button is pressed we create a jQuery object of elements with an id of 'list2'. We then use this context when we add our elements with a class of 'class1. Therefore only the elements from 'list2' are included in the union and not the elements from 'list3'. We then turn the background colour to yellow.

• Shopping List  (id of list1)
  • Tin of Tomatoes
  • Bacon
  • Loaf of Bread
• Party Guest List  (id of list2)
  • Bruce Wayne  (class of class1)
  • Emily Bronte
  • Alma Walcott  (class of class1)
• Wish List  (id of list3)
  • Health  (class of class1)
  • Wealth
  • Happiness  (class of class1)

$(function(){
  $('#btn5').on('click', function() {
    $('#list1').add('#list2')
               .css('backgroundColor', 'orange');
  });
  $('#btn6').on('click', function() {
    var $list2 = $('#list2');
    $('#list1').add('.class1', $list2)
               .css('backgroundColor', 'yellow');
  });
});

.add( element ) Example Traversal  <<  Top

Add specified elements to the matched set.

When the button is pressed we create a variable from the DOM element with an id of 'list5'. We then add this to the item marked with an id of 'list4' and turn the background colour to olive.

• Shopping List  (id of list4)
  • Tin of Tomatoes
  • Bacon
  • Loaf of Bread
• Party Guest List  (id of list5)
  • Bruce Wayne
  • Emily Bronte
  • Alma Walcott

$(function(){
  $('#btn7').on('click', function() {
    var list5 = document.getElementById("list5");
    $('#list4').add(list5)
               .css('backgroundColor', 'olive');
  });
});

.add( html ) ExamplesTraversal  <<  Top

Add specified HTML to the matched set.

In the example below when the left button is pressed we use the .one() method to stop multiple items being added to the list. Then we select the list item with an id of 'list6' and add some HTML to it. Notice this has no effect on our unordered list. This is because we are changing the jQuery stack and not the HTML document itself.

When the right button is pressed we use the .one() method to stop multiple items being added to the list. Then we select the list item with an id of 'list6' and add some HTML to it. We then use the .append() method to add the new list item to the HTML document.

• Shopping List
• Party Guest List  (id of list6)

$(function(){
  $('#btn8').one( "click", function(){
    $('#list6').add('<li>Wish List</li>');
  });
  $('#btn9').one( "click", function(){
    var $addLi = $('#list6').add('<li>Wish List</li>');
    $('#ul1').append( $addLi);
  });
});

.add( jQuery object ) Example Traversal  <<  Top

Add specified jQuery object to the matched set.

When the button is pressed we create a jQuery object from the DOM element with an id of 'list8'. We then add this to the item marked with an id of 'list7' and turn the background colour to teal.

• Shopping List  (id of list7)
  • Tin of Tomatoes
  • Bacon
  • Loaf of Bread
• Party Guest List  (id of list8)
  • Bruce Wayne
  • Emily Bronte
  • Alma Walcott

$(function(){
  $('#btn10').on('click', function() {
    var $list8 = $('#list8');
    $('#list7').add($list8)
               .css('backgroundColor', 'teal');
  });
});

Related Tutorials

jQuery Basic Tutorials - Lesson 7 - Other Traversal

• <<    .siblings()
• .addBack()     >>