JQUERY Prepending an LI to an UL with Animation
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 videos on Youtube
AnApprentice
working on Matter, a new way to gather professional feedback.
Updated on April 22, 2022Comments
-
AnApprentice about 2 years
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 ULThe 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
-
AnApprentice almost 14 yearsthanks I'm always interested in doing things right. I tried you suggestion, problem is it still is slideDown'ing the entire UL not just the new LI. Ideas?
-
Nick Craver almost 14 years@nobosh - Seems like extra or old code is running as well, you have an example page? You can see a demo of the answer code here: jsfiddle.net/KAGDu Also...are you sure the
<ul>
isn't just moving to make room for that sliding<li>
? It has to go somewhere :)