replace a block of html (innerHTML) dynamically, paiging through

<script type="application/javascript">
var pos=0;
function previous() {
	var loop=document.getElementById("loop1");
	pos--;
	loop.innerHTML=getTable(pos);
}

function next() {
		var loop=document.getElementById("loop1");
	pos++;
	loop.innerHTML=getTable(pos);
}

function getTable(i) {
   return "<table border=1>"
   	+ "<tr> <td>"+ i++ +"</td><td>"+ i++ +"</td></tr>"	
	+ "<tr> <td>"+ i++ +"</td><td>"+ i++ +"</td></tr>"
	+"</table><button onclick='alert()'>clicked me</button>";
	
}

</script>

header <p>

<button onclick="previous()">previous</button> <button onclick="next()">next</button>
<div id="loop1">
 <table border=1>
   	<tr> <td>0</td><td>1</td></tr>	
	<tr> <td>2</td><td>3</td></tr>
</table>

</div>


footer <p>