JQUERY Prepending an LI to an UL with Animation

jquery hide slidedown prepend
AnApprentice picture AnApprentice · May 21, 2010 · Viewed 14.3k times · Source

I have a UL and I'm working to dynamically add a new LI to the top of the UL with some animation.

I have the following so far which works ok:

$("#container").prepend('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>').hide().slideDown("slow");

#container is the UL

The problem with the above is that is hides the entire UL and then slides the entire UL down and I just want the NEW LI that was prepended to animate.

Ideas? thxs

Answer

Nick Craver picture Nick Craver · May 21, 2010

You can do what you want a bit easier using .prependTo() and $(html), like this:

$('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>')
  .hide().prependTo('#container').slideDown("slow");

You can see a demo of the above code here

.prepend() returns the element you prepended to, not the element or elements that were prepended. Switching it around to .prependTo() makes it a bit cleaner and should have the effect you want, since you can continue chaining on the elements you prepended. Also, if you're using the same string many times, this will now cache the document fragment and make it faster as well :)

One last thing, if you're doing this multiple times, make sure that ID on the <li> is unique, or you're creating invalid HTML which will have some unwanted side effects.

Related questions

Are jQuery's hide and slideUp methods equivalent?

Do slideUp('slow') and hide('slow') result in the same animation effects? Example Code: $(document).ready(function(){ $("#hide").click(function(){ $("p").hide('slow'); }); $("#show").click(function(){ $("p").show('slow'); }); }); <p>If you click on the "Hide" button, I …

Read More
Use jQuery to hide a DIV when the user clicks outside of it

I am using this code: $('body').click(function() { $('.form_wrapper').hide(); }); $('.form_wrapper').click(function(event){ event.stopPropagation(); }); And this HTML: <div class="form_wrapper"> <a class="agree" href="javascript:;">I Agree</a&…

Read More
Hide/Show Column in an HTML Table

I have an HTML table with several columns and I need to implement a column chooser using jquery. When a user clicks on a checkbox I want to hide/show the corresponding column in the table. I would like to …

Read More