Search code examples
javascriptjqueryhtmljquery-after

Curious about hide().after("") in jQuery

I have some code at here:

html:

<body>
<p>This is a paragraph.</p>
<button>click me</button>
</body>

Javascript:

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide().after('<p>hello world</p>');
  });
});

Actually, I've using JQuery 2.0.2 also.

In my understanding, When I click the button click me, "<p>This is paragraph<p>" will be replaced by <p>hello world</p>.

The first click is successful. However, many hello world with the growth rate of progression show after the first hello world shown. For example:

hello world

I've checked the source code by firebug, and find it is:

<p style="display: none;">This is a paragraph.</p>
<p>hello world</p>
<p style="display: none;">hello world</p>
<p>hello world</p>
<button>click me</button>

Why the first <p>hello world</p> wasn't be replaced by the new one?

Doesn't it suppose to show one p tag only?

Solution

  • That's cause you're creating paragraphs

    <p>hello world</p>

    and on every click the $('p') is a collection of all p elements on your page.
    The more paragraphs you have... more appends. live demo - issue example

    An element, even if set to display:none using .hide(), is still present in your document..

    What you're up to is probably one of the following:

      $("button").click(function(){
      $("p").html('hello world');
  });


      $("button").click(function(){
      $("p").text('hello world');
  });


      $("button").click(function(){
      $("p").replaceWith('<p>hello world</p>');
  });


      $("button").click(function(){
    $("p").after('<p>Hello world</p>').remove();
  });