How do I use innerHtml or appendChild() to add multiple rows to a table from an xdr call

I make an xdr call to return data for a webpage, this includes table with some rows of data, I only retrieve a few rows so that it loads quickly, I then use

var data    = document.getElementById("data");
data.innerHTML = xhr.responseText;

to replace the placeholder element with the data

Then I made second call thats get all the data and it again replaces element called data with the full set. But this second call can retrieve alot of data and having problems rendering in one go, so now I want to make multiple calls just adding a modest amount of data to the existing table

innerHtml no good because replaces the current data appendChild() not working for me because this is for adding one child element but I want to add multiple tr elements, i.e each async call will return data for 1000 rows e.g

<tr><td>Row1Col1</td><td>Row2Col2</td></tr><tr><td>Row2Col1</td><td>Row2Col2</td></tr>

What is a solution ?

Answer

Try data.innerHTML += xhr.responseText