Ajax: Appending list-item at the top

Question

I'm calling a php processing file using ajax an appending the returned HTML usign the code below

$.ajax({
    type: "POST",
    url: "proc/process.php",
    data: dataString,
    cache: false,
    success: function(html){
        $("ul#lists").append(html);
        $("ul#lists li:last").fadeIn("slow");
        $("#flash").hide();
    }   
});

It appends a <li></li> item at the end of the ul#lists. I want the returned list-item <li></li> at the top of the lists instead of being appended at the last. How do I do that??

Answer 1

You may try the .prepend() function:

$("ul#lists").prepend(html);
$("ul#lists li:first").fadeIn("slow");

And here's a live demo.