Exploring jQuery .after()

<p>The purpose of this fiddle is to explore the use of the jQuery .addClass method. <a href="http://api.jquery.com/after/" target="_blank">jQuery .after()</a></p><br />

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 .after()</h1>
 
<p>The purpose of this fiddle is to explore the use of the jQuery .after method. <a href="http://api.jquery.com/after/" target="_blank">jQuery after()</a></p><br />

<p id="summary_paragraph">Summary of jQuery after: <em>Insert content, specified by the parameter, after each element in the set of matched elements.</em></p>

<button id="clickToHide">Click Me to Hide the Image</button>

<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...

JavaScript

$(document).ready(function(){
//Let us start out by adding an image after the Summary
    var imgSrc = '<img src="http://lorempixel.com/200/200/technics/" />';
$( '#summary_paragraph' ).after( imgSrc + '<br />' );

//Next lets move the "Heading to be Cloned" to beneath the first H1

$( 'h1:first' ).after( $('.heading_to_clone') );

/*
** Now lets very inefficently count all of our headings. I am going ** to cache the jQuery object select the headings just in case I   ** want to use it later.
*/

var $headings = $( 'h1, h2, h3, h4, h5, h6' ),
    count = 0;

$headings.after(function() {
    count++
    return '<span>Heading # ' + count + '</span>';
});

//Lets add the total account up at the top

$('img:first').after('<p>There are a total of ' + count + ' headings on this page.</p>');

//Lets add three inline images after the button

var $img1 = '<img style="display: inline;" src="http://lorempixel.com/200/200/technics/1" />',
    $img2 = '<img style="display: inline;" src="http://lorempixel.com/200/200/technics/2" />',
    $img3 = '<img style="display: inline;" src="http://lorempixel.com/200/200/technics/3" />';

$('button:first').after('<br />', [$img1, $img2, $img3]);

});