Exploring jQuery Add

The purpose of this fiddle is to explore the use of the jQuery .add method. <a href="http://api.jquery.com/add" target="_blank">jQuery Add</a>

by psyne

HTML

<!-- Reset and Style our Base using the yui CSS base. http://yuilibrary.com/yui/docs/cssbase/ -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssbase/cssbase-min.css">

<!-- Sample Content to Plugin to Template -->
<h1>Exploring jQuery Add</h1>
 
<p>The purpose of this fiddle is to explore the use of the jQuery .add method. <a href="http://api.jquery.com/add" target="_blank">jQuery Add</a></p><br />

<p id="append_after">Summary of jQuery Add: <em>Add elements to the set of matched elements.</em></p>

<hr />
 
<h1 id="headings">Headings</h1>
 
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h1 class="heading_to_clone">Heading to be cloned</h1>
 
<small><a href="#wrapper">[top]</a></small>
<hr />
 
 
<h1 id="paragraph">Paragraph</h1>
 
<img style="width:250px;height:125px;float:right" src="http://lorempixel.com/250/125/" alt="CSS | God's Language" />
<p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
 
<p>Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a...

JavaScript

$(document).ready(function(){

//Basic use of Add - adding a selector or element to an existing jQuery object 
    
var $headings = $('h1,h2,h3,h4,h5,h6');

//Lets add the table headings to the $headings object and then make the background color red using css.

$headings.add('th').css('background-color', 'red');

/*
** Lets explore chaining multiple changes using the add method
** Our goal is to select all the li's on the page indent them using
** the css margin property. Then select all the even li's and make
** them bold using the font-weight property.
*/

$('li').css('margin-left','20px').add('li:even').css('font-weight', 'bold');

/*
** Lets try using add with dynamically inserted elements.
** Our goal is to clone the h1 with a class of heading_to_be_cloned 
** then add a new h2 to insert after the cloned element.
*/

$('h1.heading_to_clone')
    .css({
        'background-color' : 'purple',
        'color' : 'white'
    })
    .clone()
    .add('<h2>Dynamically Added</h2>')
    .insertAfter('p#append_after');

});