JQUERY, appending an LI to a UL, and then animating that LI

Question

I have an UL:

<ul id="news-feed">.....</ul>

I'd like to be able to append a LI to the top of the list and have that appended item slideDown into place.

$("#news-feed").append('<li">This is my item</li>').hide().slideDown();

Problem I'm having is the above code is sliding the news-feed item down, and not the appended item. Any ideas?

Answer 1

If you were hoping to chain it all together, you can use appendTo() instead. It will return the new <li> element so you can slide it down.

$('<li>This is my item</li>').appendTo("#news-feed").hide().slideDown();

EDIT: As @cletus noted, you should use .prependTo() as he did in his answer instead of .appendTo(). This will bring the new item to the top of the list.