table、tr、td 标签上的 document.createElement 失败 IE8答案

【问题标题】：document.createElement on table,tr,td tags fails IE8table、tr、td 标签上的 document.createElement 失败 IE8
【发布时间】：2013-04-08 22:03:09
【问题描述】：

正如标题所说，我遇到了 IE8 问题（适用于 FF 和 IE9）。以下代码不会产生任何错误，如果我用 div、ul 和 li 替换；有用。我进行了一些搜索，但在 (table,tr,td) 标记上没有找到任何不支持使用document.createElement 和 IE8 的内容。我哪里错了？

代码如下：

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>My Page Title</title>
  <script>
    function init() {
      var ele = document.getElementById('content');
      var table = document.createElement('table');
      var tr = document.createElement('tr');
      var td = document.createElement('td');
      var txt = document.createTextNode('IE8');

      td.appendChild(txt);
      tr.appendChild(td);
      table.appendChild(tr);
      ele.appendChild(table);
    }
   </script>
  </head>
  <body onload="init();">
    <div id="content"></div>
  </body>
</html>

【问题讨论】：

使用 IE10 似乎可以在 IE8、IE9 和 IE10 模式下工作。但它确实不在 IE7 模式下工作。
@MichaelTodd，IE8 文档模式设置为 Quirks。切换到 IE8 标准就成功了。谢谢。

标签： javascript createelement

【解决方案1】：

您不能只使用createElement() 函数来创建table, tr、td 来创建整个表格元素。

您必须使用表对象的insertRow()、insertCell() 函数

供参考检查：

http://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/

编辑：

即使我对 IE 问题也有同样的想法，购买我发现实际上要让createElement() 在 IE7 中工作，您必须创建 tbody 对象并将其附加到 table 对象和 tr 到该 tbody 对象

tb = document.createElement("tbody")  
var tbody  = document.createElement('tbody'); 
table.appendChild(tbody);
var table_row  = document.createElement('tr'); 
tbody.appendChild(table_row)//

【讨论】：

【解决方案2】：

只需在标记中添加<!DOCTYPE html>。在 IE7 及以上版本中，没有 DOCTYPE 的默认渲染是 Quirks 模式 (IE5)。

【讨论】：

【解决方案3】：

试试这个：

  var ele = document.getElementById('content');
  var table = document.createElement('table');
  ele.appendChild(table);
  var tr = document.createElement('tr');
  table.appendChild(tr);
  var td = document.createElement('td');
  tr.appendChild(td);
  var txt = document.createTextNode('IE8');
  td.appendChild(txt);

【讨论】：