Insert same html into element multiple times with jQuery

Question

I want the user to click on a button and then have some html pop into an element. I did so and it works but it only works once. If they click the button again, nothing happens. I thought using empty() would fix the problem but it doesn't. What's wrong with my code.

<script type="text/javascript" >

$(document).ready( function() {

   $('#button').on('click', function () {

     $('#ul').html('<li>testing testing</li>').hide(1000, function() {

        $(this).empty();    

     });    

   });

});

</script>

<input type="button" value="click me" id="button" />

<ul id="ul">

</ul>

David Hellsing · Accepted Answer · 2012-10-05 18:18:40Z

3

The element is hidden the second time you click the button. You can do:

$('#ul').show().html('...

http://jsfiddle.net/KXkgZ/

answered Oct 5, 2012 at 18:18

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

thank_you Over a year ago

Is there a way I could target the newly inserted li in the ul and just hide that? Actually I think I can do that on my own.

David Hellsing Over a year ago

I don’t understand your comment, sorry :) If you have another question, it’s probably better to post a new topic.

Huangism Over a year ago

@jason328 using your current method, you are replacing the ul content with your li each time so there is only one at any given time

David Hellsing Over a year ago

@Huangism yes, that is how I interpreted "pop some html into an element".

Huangism Over a year ago

@David sorry my comment was meant for the OP's comment

Farnabaz · Accepted Answer · 2012-10-05 18:21:30Z

2

as you want to pop html each time you click on button you should use append

$('#ul').append('<li>testing testing</li>');

see append

answered Oct 5, 2012 at 18:21

Farnabaz

4,0662 gold badges25 silver badges42 bronze badges

Comments

Emil · Accepted Answer · 2012-10-05 18:25:34Z

2

$("#button").click(function(){ 
    $("#ul").append("testing testing");
});

edited Oct 5, 2012 at 18:25

Emil

7,25618 gold badges80 silver badges135 bronze badges

answered Oct 5, 2012 at 18:20

MikeB

2,4721 gold badge16 silver badges24 bronze badges

Comments

epascarello · Accepted Answer · 2012-10-05 18:22:22Z

1

jQuery('<li>testing testing</li>').appendTo('#ul').hide(1000, function() {
    $(this).remove();    
 });

answered Oct 5, 2012 at 18:22

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

Blaise Swanwick · Accepted Answer · 2012-10-05 18:22:46Z

1

When you do a .hide() you set the CSS selector "display" = "NONE" You need to change it to something like this:

$('#ul').html('<li>testing testing</li>').hide(1000, function() {
  $(this).empty();
  $(this).show();
});

answered Oct 5, 2012 at 18:22

Blaise Swanwick

1,7551 gold badge16 silver badges18 bronze badges

Collectives™ on Stack Overflow

Insert same html into element multiple times with jQuery

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related