Question

I want to get some text from php file and display on a browser using jquery such that each time a new row will add at top of other and with fade in effect:
I write a script like:

$(function() {
    setInterval(function() {
    var html = $("#response").load("new_feed.php");
    $("#foo").append("<div>"+html+"</div>");
    $("#foo").fadeIn('slow');
}, 1000);
}

<div id="foo" align="left"></div>

but it just create a div at once and display output like:

[object Object]
[object Object]
[object Object]
...
[object Object]

Answer 1

You have to work with newly created div, you’re applying fadeIn effect to #foo. Try this:

$(function() {
    setInterval(function() {
        $.get("new_feed.php", function(result) {
            $("<div></div>")
                .hide()
                .html(result)
                .prependTo("#foo")
                .fadeIn("slow");
        });
    }, 1000);
});

As you can see I use .get() not .load(). Because .load() function loads content to matching selector. In your case it gets content from new_feed.php tries to load it’s contents to #response (I don’t know if it’s exists).

.load() function returns jQuery object, therefor when you assign it to html variable you see [object Object].