innerHtml运行问题，求解！

<html>
<head>
<title>测试innerHtml</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="pragma" content="no-cache">
<script language="javascript">
var num=0;
function addconnapp()
{
var newtr=conntab.insertRow(conntab.rows.length-1);
var newtd0=newtr.insertCell();
newtd0.innerHtml="名称";
var newtd1=newtr.insertCell();
newtd1.innerHtml="<input type='text' value='abc' id='conn"+num+"' name='conn"+num+"'style='width:100px;'>";
var newtd2=newtr.insertCell();
newtd2.innerHtml="所属国家";
var newtd3=newtr.insertCell();
newtd3.innerHtml="<select id='cid"+num+"' name='cid"+num+"' style='width:100px;'><option>中国</option></select>";

num++;
//alert(newtd3.innerHtml);
}
</script>
</head>
<body leftmargin='0' topmargin='0'><center>
<br>
<table id="conntab" width='100%' border='1' cellspacing='2' cellpadding='0'>
<tr>
<td colspan=4><input type=button id=button1 value=button1 onclick=addconnapp()></td>
</tr>
</table>
</body>
</html>这段html代码的目的是每按下按钮"button1"，则从表conntab第一行前依次加如1行2列。
现象：按了button1后，表向下移动了，可是见不到加入的元素。
请大虾们赐教下！