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

Yes, first you need to make it display none, then make it slide down:

$("#news-feed").append('<li style="display:none">This is my item</li>').find('li:last').slideDown();

If that doesn't work, break it into two statements:

$('#news-feed').append('<li style="display:none">This is my item</li>');
$('#news-feed li:last').slideDown();

Answer 2

Usually we take it this way:

var newsItem = $("<ul></ul>"); // Create a template item and clone from it

var parentItem = $( /* whatever selector string */ );

//  …

newsItem.clone().text("blah").hide().appendTo(parentItem).toggle('slide');

Also, when you say “add to the top of the list”, usually prepend() works better as expected.

Answer 3

If you want to chain it together nicely, flip it around and use prependTo() instead of prepend(). Either:

$("<li>").text("This is my item").hide().prependTo("#news-feed").slideDown();

or

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

I prefer the first because it handles escaping. The second doesn't. But it's largely a matter of preference.

Answer 4

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.