title: Curious about hide().after("") in jQuery
body: <p>I have some code <a href="http://jsfiddle.net/Marslo/QvYSj/5/" rel="nofollow noreferrer">at here</a>:</p>
  
  <h3>html:</h3>
  
  <pre><code>&lt;body&gt;
  &lt;p&gt;This is a paragraph.&lt;/p&gt;
  &lt;button&gt;click me&lt;/button&gt;
  &lt;/body&gt;
  </code></pre>
  
  <h3>Javascript:</h3>
  
  <pre><code>$(document).ready(function(){
    $("button").click(function(){
      $("p").hide().after('&lt;p&gt;hello world&lt;/p&gt;');
    });
  });
  </code></pre>
  
  <p>Actually, I've using <code>JQuery 2.0.2</code> also.</p>
  
  <p><hr />
  In my understanding, When I click the button <strong>click me</strong>, <code>"&lt;p&gt;This is paragraph&lt;p&gt;"</code> will be <strong><em>replaced</em></strong> by <code>&lt;p&gt;hello world&lt;/p&gt;</code>.</p>
  
  <p>The first click is successful. However, many <code>hello world</code> with <strong>the growth rate of progression</strong> show after the first <code>hello world</code> shown. For example:</p>
  
  <p><img src="https://i.stack.imgur.com/SeIng.png" alt="hello world"></p>
  
  <p><hr />
  I've checked the source code by firebug, and find it is:</p>
  
  <pre><code>&lt;p style="display: none;"&gt;This is a paragraph.&lt;/p&gt;
  &lt;p&gt;hello world&lt;/p&gt;
  &lt;p style="display: none;"&gt;hello world&lt;/p&gt;
  &lt;p&gt;hello world&lt;/p&gt;
  &lt;button&gt;click me&lt;/button&gt;
  </code></pre>
  
  <p>Why the first <code>&lt;p&gt;hello world&lt;/p&gt;</code> wasn't be replaced by the new one?</p>
  
  <p>Doesn't it suppose to show one p tag only?</p>