如何使用 createElement 创建新表？答案

【问题标题】：How to use createElement to create a new table?如何使用 createElement 创建新表？
【发布时间】：2018-04-05 22:19:32
【问题描述】：

为什么下面的代码不起作用？

<html>
<head>
    <script type="text/javascript">
    function addTable() {
        var table = document.createElement('table');
        table.innerHTML = "<tr><td>123</td><td>456</td></tr>";
        document.getElementById("addtable").appendChild(table);
    }
    </script>
</head>
<body>
    <input type="submit" value="New Table" onClick="addTable()"/>
    <div id="addtable"></div>
</body>
</html>

【问题讨论】：

标签： javascript dom

【解决方案1】：

据我所知，设置 table 元素或表格部分元素（如 tbody 或 thead）的 innerHTML 属性在 Internet Explorer 上不起作用（编辑：我刚刚检查过 - 使用 @987654321 @ 和普通的 IE8。对于 IE6 和 IE8，结果是“未知的运行时错误”，它会导致 IE7 崩溃，但这可能是 IEtester 特定的问题）。

向表格添加行的DOM standard 方法是在表格或表格部分元素上使用insertRow() 方法（在该DOM 规范中查找HTMLTableElement 和HTMLTableSectionElement）：

<script type="text/javascript">
function addTable() {
    var c, r, t;
    t = document.createElement('table');
    r = t.insertRow(0); 
    c = r.insertCell(0);
    c.innerHTML = 123;
    c = r.insertCell(1);
    c.innerHTML = 456;
    document.getElementById("addtable").appendChild(t);
}
</script>

在脚本中，没有创建明确的表部分。 AFAIK，会自动创建一个 TBODY，并在其中插入行。

编辑：关于 IE，我应该指出，您可以通过设置 innerHTML 属性来添加一个包含内容的表格，但是您注入的 html 必须是一个完整的表格。所以这确实有效，即使在 IE 上也是如此：

<script type="text/javascript">
function addTable() {
    var html = "<table><tr><td>123</td><td>456</td></tr></table>";
    document.getElementById("addtable").innerHTML = html;
}
</script>

【讨论】：

是的，确实会引发运行时错误！我们应该使用这种方法，或者为所有 tbody、tr 和 td 使用传统的创建/附加循环。
+1 在所有帐户上都正确。 innerHTML 在 IE 中对于 table 和 tbody 是只读的。
我的错……错字。将 table 更改为 t。已在答案中修复
嗨，我不能把那样的东西放进去吗？ c.innerHTML = "名称：";
yeeen：把什么放在什么里面？ AFAIK，您可以将表格单元格的 innerHTML 属性设置为您喜欢的任何内容，只要它是有效的 HTML。

【解决方案2】：

//_table my current table
var table = document.createElement('table'); //new table
table.innerHTML = _table.innerHTML; //clone table innerHTML

【讨论】：