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

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, "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?

What makes you think anything would be replaced? When I see methods called `hide` and `after`, I think that something is getting hidden and that something is getting put after something, not that something is replaced. — hobbs, Dec 25 '13 at 07:09
use `$("p").replaceWith('
hello world
');` see http://jsfiddle.net/arunpjohny/M6QTc/2/ — Arun P Johny, Dec 25 '13 at 07:10
Hi @hobbs, thanks for your answer. The reason of I think it's "replaced" is because, the first time, I click the button, `This is paragraph` is gone, and `hello world` shows. So, I think that might be kind of **replace**. — Marslo, Dec 25 '13 at 09:27
Hi @ArunPJohny, thank you, that's very helpful. I just want to know why `hide().after()` cannot replace like the first click. — Marslo, Dec 25 '13 at 09:29

Roko C. Buljan · Accepted Answer · 2013-12-25T07:29:54.817

8

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

edited Dec 25 '13 at 07:29

answered Dec 25 '13 at 07:13

Roko C. Buljan

196,159
39
305
313

Thanks for your reply! I think I'm understood. The reason is: `after('
hello world
')`: this sentence will be added **after** every
tag, including those p tags who carry with `style="display: none;"` – Marslo Dec 25 '13 at 09:38
By the way, your live demo perfect!!! I can figure out all by your demo. :) Marry Christmas!! – Marslo Dec 25 '13 at 09:46

score 1 · Answer 2 · answered Dec 25 '13 at 07:12

1

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

answered Dec 25 '13 at 07:12

Satinder singh

10,100
16
60
102

Yes, `html()` is the way to "replace". Thanks! – Marslo Dec 25 '13 at 09:39

score 1 · Answer 3 · edited Apr 20 '20 at 21:59

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>');

score 1 · Answer 4 · answered Dec 25 '13 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.

score -1 · Answer 5 · edited Apr 20 '20 at 22:00

-1

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

edited Apr 20 '20 at 22:00

halfer

19,824
17
99
186

answered Dec 25 '13 at 07:11

Kirill

544
1
5
16

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

html:

Javascript:

5 Answers5