CODEWITHSUNDEEP
jqueryajax
ptamzz
ptamzz

Reputation: 9365

Ajax: Appending list-item at the top

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??

Upvotes: 4

Views: 8440

Answers (2)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038770

You may try the .prepend() function:

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

And here's a live demo.

Upvotes: 5

ngduc
ngduc

Reputation: 1413

Here is what you want:

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

Upvotes: 1

Related Questions