How to use createElement to create a new table?

问题

Why the following code doesn't work?

<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>

回答1:

To the best of my knowledge, setting the innerHTML property of a table element or table section element (like tbody or thead) does not work on Internet Explorer (EDIT: I just checked - with ietester and plain IE8. Result is "unknown runtime error" for IE6 and IE8, and it crashes IE7 but that might be an IEtester specific problem).

The DOM standard way of adding rows to a table is using the insertRow() method on a table or table section element (look for HTMLTableElement and HTMLTableSectionElement in that DOM spec) :

<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>

In the script, there is no explicit table section being created. AFAIK, a TBODY is automatically created, and rows are inserted in there.

EDIT: regarding IE, I should point out that you can add a table with content and all by setting the innerHTML property, but the html you inject in there must be a complete table. So this does work, even on 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>

回答2:

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

来源：https://stackoverflow.com/questions/2324782/how-to-use-createelement-to-create-a-new-table

标签

javascript

dom