解决IE9下JavaScript动态创建表格innerHTML显示异常

IE9下动态创建表格innerHTML显示异常问题

在使用JavaScript动态构建HTML页面内容时，开发者常需通过脚本生成DOM元素。

 
var tab = document.createElement("table");
tab.innerHTML += "<td>订货单号</td>"+
"<td>单据日期</td>"+
"<td>商品类型</td>"+
"<td>订单属性</td>"+
"<td>配货次数</td>"+
"<td>详细</td>";

执行上述代码后，虽然创建了一个table标签（期间可能涉及class样式渲染），但在IE9及更低版本的浏览器中，这种直接赋值innerHTML的方式会导致表格显示异常或格式错乱。

使用jQuery解决IE9表格渲染问题

引入jQuery库可以规避此问题，推荐写法如下：

 
var inn = "<tr>"+
"<td>订货单号</td>"+
"<td>单据日期</td>"+
"<td>商品类型</td>"+
"<td>订单属性</td>"+
"<td>配货次数</td>"+
"<td>详细</td>"+
"</tr>";
$(tab).html(inn);