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 a second call that gets all the data and it again replaces element called data with the full set. But this second call can retrieve a lot of data and is 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 is no good because replaces the current data; appendChild() is 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 ?

Try data.innerHTML += xhr.responseText