Location.reload more elegant/efficient solution

Question

Situation:

I have an html page with a PHP function on it. The function echoes the elements of an array in a foreach loop. The data of the array is used in each individual echo.

foreach ($DB->query($sql) as $v) {
    echo $v['specificData'];
}

All new elements are added to the array with ajax.

Problem:

I have been using location.reload to refresh the page each time a new element is added so it show ups right away. The problem is that that solution isn't elegant/efficient at all.

Question:

What are my other options? The easiest, the better.

Appreciate any help and advice ;)

PS: I already thought about jquery.append() but I'm hoping someone has an easier idea xD

Answer 1

Refresh just the part of the page that needs refreshing. You can make it smooth by doing something like this in jQuery upon successful AJAX callback:

$(element).fadeOut(function(){
    $(element).html(ajax_response_here).fadeIn(); // .html() or .append() whichever makes more sense
});

Answer 2

If you already using ajax to send the data back to the server its should be hard to use it to update the dom as well. If you want an efficient way then probably this is the way to go. If you want to avoid jQ for updating the site, you can simply write a basic js function.

function appendTo(parent, content) {
    parent.innerHTML += "<p>"+content+"</p>";
}

or

function appendToById(parentId, content) {
    appendTo(document.getElementById(parentId), content);
}