JQuery - append rather than replace content using .innerHTML?

Question

Below is a function that retrieves a users older wallposts, 16 at a time, and appends each chunk of 16 to the end of the current list in the div called "sw1".

It works fine, except in the case where there is currently a wallpost that contains a video/embedded object that is currently in the process of playing. When we click on the button that calls the function below during the playback of an object in sw1, the below function seems to cause the entire content of sw1 to be removed, and then re-dumped.

Is it possible to modify the function below so that it merely appends new data to the end of sw1, rather than replacing the entire contents, killing any objects that are currently playing??

function fetch_older_wallposts(u,lim){
var xhr = getXMLHttpRequest();

xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {

//document.getElementById( 'sw1' ).innerHTML.append( xhr.responseText );
document.getElementById( 'sw1' ).innerHTML += xhr.responseText;
}else{
document.getElementById( 'oaps_loading' ).innerHTML = 'loading';
}
};

xhr.open("POST", "script.php?u="+u+"&lim="+lim, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(null);
}

Any sort of assistance or guidance appreciated guys....

Thanks for all the usefull comments guys!

Answer 1

If you are going to use jQuery, why mix and match styles, use jQuery all the way:

function fetch_older_wallposts(u,lim){
    $('#oaps_loading').html('loading');
    $.ajax({url: 'script.php', data: { u: u, lim: lim}, type: 'POST', 
        success: function(data) {
            $('#sw1').append(data);
        });
}