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

StackOverflow https://stackoverflow.com/questions/20770053

Question

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?

Was it helpful?

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();
  });

OTHER TIPS

If only you want to change the text you an do like this

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

JS FIDDLE

after('<element/>') means generate an element and insert it after the selected element(s), you are generating and inserting an element after all the selected p element(s), on the first click you are adding 1 element, on the second click 2 elements and so on, because after each click there are more than one p elements. after doesn't replace anything.

Well, there is nothing surprising that is happening here. Actaully that is what should happen, since you are adding <p> tag after hiding the first <p> <p>This is paragraph<p>.

So your first click ends up having two <p> tag in the DOM and further clicks, adding more <p> tags. hide() does not removes the elements form the DOM; it just changes its display property. You can use replaceWith() or remove() to remove the first <p>, if you want this to work, as you needed.

  $("p").after('<p>hello world</p>').remove();  //remove the selected `<p>` tag after `<p>is appended.</p>`

or

 $("p").replaceWith('<p>hello world</p>');

It happens because you adding new p element after each p tag in document (even after hidden).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top