为什么添加表格是反着的呢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态增加表格行</title>
<script type="text/javascript">
function add(){
var txt1=document.getElementById("txt1").value;
var txt2=document.getElementById("txt2").value;
var txt3=document.getElementById("txt3").value;
var txt4=document.getElementById("txt4").value;
var t_tr=document.getElementById("tb").insertRow();
t_tr.bgColor="#eeeeee";
var t_td0=t_tr.insertCell();
t_td0.innerHTML=txt1;
var t_td1=t_tr.insertCell();
t_td1.innerHTML=txt2;
var t_td2=t_tr.insertCell();
t_td2.innerHTML=txt3;
var t_td3=t_tr.insertCell();
t_td3.colspan="2";
t_td3.innerHTML=txt4;
}
</script>
</head><body>
<input type="text" id="txt1" value="" size="8"/>
<input type="text" id="txt2" value="" size="8"/>
<input type="text" id="txt3" value="" size="8"/>
<input type="text" id="txt4" value="" size="8"/>
<br/>
<button onclick="add();">添加表格行</button>
<hr/>
<table width="350" border="1" bordercolor="#cccccc" id="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>爱好</th>
<th>特长</th>
</tr>
</body>
</html>
小弟刚学javascript    我想试试动态的添加表格   为什么这个代码的效果是和预期相反呢
就是新加一行会加在表头上面  同一行的数据也是顺序反的   如果想改过来要怎么改呢   求指教