Hidding Div - Showing Div

I have something like this in a function:

....
var box = document.getElementById("box");
box.style.visibility = 'hidden'
....

This hides a div setup like the following:

<div id="box">
<table>
<tr><td>Content1</td></tr>
</table>
</div>

But, what if I want to have a another table
replace the table in the div above.

Say I want something like this to replace it:

<table>
<tr><td>Content2</td></tr>
</table>

For this example I have used simple content in my divs. But, in th real case, the div has a large group of nested tables of data.

I want the two to occupy the same space, so when one becomes hidden and the other becomes
visible, it is like they are replacing one another.

Since I have such large amounts of data in one of the tables, I do not want to user innerHTML to do the replacement. Is there any other way I can do it?