Question

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?

Answer 1

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);
    }
});