CODEWITHSUNDEEP
jqueryhtmlajaxappend
Chris
Chris

Reputation: 6233

How to append list items without creating a new html element in JQuery?

I have an unordered list with several list elements. Now via Jquery I would like to load more items from my database and then append them to my list. My code:

$("#somediv").append($("<div>").load("ajax.php?action=getresults", function()
{
    $('#busy').delay(1500).fadeOut(700);
}));

The problem here is that I dont want to add a new html to my unordered list as my list items will be "created" by my ajax request. So my ajax request will e.g. return <li>some value</li> and then this should be appended to the ul. So actually I would like to do something like

$("#somediv").append($("").load("ajax.php?action=getresults", function()
{
    $('#busy').delay(1500).fadeOut(700);
}));

What would be the solution to append content without creating a new html element (in this case the div element) in JQuery?

Upvotes: 1

Views: 426

Answers (2)

A. Wolff
A. Wolff

Reputation: 74410

Cleaner way i think:

$.get("ajax.php?action=getresults", function(html){
     $("#somediv").append(html);
     $('#busy').delay(1500).fadeOut(700);
});​​​

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337714

If I've understood your question correctly you need to use ajax() instead of load() to give you more control of what happens to the received data. Try this:

$.ajax({
    url: "ajax.php?action=getresults",
    dataType: "html", 
    success: function(html) {
        $("#somediv").append(html);
        $('#busy').delay(1500).fadeOut(700);
    }
});

Upvotes: 2

Related Questions