js运行时异常与table中的内容

这样一段代码

<table><tr id="user">

</tr></table>

 

<script>

   document.getElementById("user").innerHTML="<td>hello</td>"；

 

</script>

这个时候就会出行  运行时异常

 

这是因为在 html  很多标签 如 table tr  这些标签对innerHTML的支持并不好

但是像div  span 就支持的很好  建议用innerHTML时使用div与span

 

这样一段代码

<table id="user">table>

<script>

   var table=document.getElementById("user");

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

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

  var div=document.createElement("div");

  div.innerHTML="大家好";

 td.appendChild(div);

tr.appendChild(td);

table.appendChild(tr);

</script>

 

这段代码的意思很明显 就是在当前table上添加一行一列 并且行内添加div  显示字体 大家好

但是调用这段代码后  结果没有任何东西  为什么了

 

因为 table的appendChild自能appendChild  table中的下一节点

table的下一级几点是tbody 所以加不进去 

修改成这样就可以了

<table id="user"><tbody  id="user"></tbody><table>

<script>

   var table=document.getElementById("user");

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

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

  var div=document.createElement("div");

  div.innerHTML="大家好";

 td.appendChild(div);

tr.appendChild(td);

table.appendChild(tr);

</script>

 

结果出来了 

就算你只写了<table id="user"><table>

你打印一下 document.getElementById("user").innerHTML;

他也会出来一个 <tbody></tbody>