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:
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?
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:
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?
Share Improve this question edited Mar 10, 2017 at 12:44 Mohammad 21.5k16 gold badges57 silver badges85 bronze badges asked Dec 25, 2013 at 7:08 MarsloMarslo 3,2614 gold badges29 silver badges42 bronze badges 6-
2
What makes you think anything would be replaced? When I see methods called
hideandafter, I think that something is getting hidden and that something is getting put after something, not that something is replaced. – hobbs Commented Dec 25, 2013 at 7:09 - 1 see jsfiddle/arunpjohny/M6QTc/1 – Arun P Johny Commented Dec 25, 2013 at 7:10
-
1
use
$("p").replaceWith('<p>hello world</p>');see jsfiddle/arunpjohny/M6QTc/2 – Arun P Johny Commented Dec 25, 2013 at 7: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 paragraphis gone, andhello worldshows. So, I think that might be kind of replace. – Marslo Commented Dec 25, 2013 at 9:27 -
Hi @ArunPJohny, thank you, that's very helpful. I just want to know why
hide().after()cannot replace like the first click. – Marslo Commented Dec 25, 2013 at 9:29
5 Answers
Reset to default 8That'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();
});
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).