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

Question

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

317 views Asked by Marslo At 25 December 2013 at 07:08

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, "This is paragraph" will be replaced by hello world.

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 hello world wasn't be replaced by the new one?

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

Original Q&A

There are 5 answers

Kirill On 25 December 2013 at 07:11

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

Satinder singh On 25 December 2013 at 07:12

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

bipen On 25 December 2013 at 07:13

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

So your first click ends up having two  tag in the DOM and further clicks, adding more  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 , 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>');

Ram On 25 December 2013 at 07:17

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.

**Roko C. Buljan** · Accepted Answer · 2013-12-25T07:13:28+00:00

That's cause you're creating paragraphs

hello world

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

TechQA.

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

html:

Javascript:

There are 5 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in JQUERY-AFTER

Popular Questions

Popular Tags

Trending Questions