动态创建Table时，在IE中需要注意的一个问题

A small trick when creating table dynamically with javascript.

下面这种方式可以创建table，并附加到Dom树中，但是在IE中是不显示的：

var  table  =  document.createElement( " TABLE " ); 

var  tr  =  document.createElement( " TR " ); 

var  td  =  document.createElement( " TD " ); 

var  text  =  document.createTextNode( " testt " ); 

td.appendChild(txst); 

tr.appendChild(td); 

table.appendChild(tr); 

document.body.appendChild(table); 

 

不报错，用Dom查看器也可以看到整个table被完整创建了，并附加到body里面，但就是不显示。这是因为在IE里不允许将tr直接附加到table里，而要先将tr附加到tbody中，然后再将tbody附加到table下。所以正确的应该是：

 

var  table  =  document.createElement( " TABLE " ); 

var  tbody  =  document.createElement( " TBODY " ); 

var  tr  =  document.createElement( " TR " ); 

var  td  =  document.createElement( " TD " ); 

var  text  =  document.createTextNode( " testt " ); 

td.appendChild(txst); 

tr.appendChild(td); 

tbody.appendChild(tr) 

table.appendChild(tbody); 

document.body.appendChild(table); 

 

FireFox中不存在这个问题。需要注意的是显性的利用HTML构造table时，tbody元素不是必须的，可能IE在解析的时候会自动加入tbody吧，否则就解释不通了？