IE使用appendChild新增<table>中的<tr>失敗

最近因為某個網頁UI功能需要動態長出表格<table>和列<tr>，

因此用到了appendChild這個方法，搭配createElement，

動態地將我需要的資料列產生然後拼到表格中，

在開發過程中是使用方便快速的Chrome做測試，

終於功能做好了，要來測瀏覽器相容性了，結果第一關IE就爆了，

正常應該要動態長出資料列的表格在IE下執行時就變得毫無反應，就只是個table....



讓我們來看一段簡單的sample code：

<table id="t">
    <tr><td>原本的列</td></tr>
</table>

<script>
    var table = document.getElementById("t");
    var newRow = document.createElement("tr");
    var newCell = document.createElement("td");
    newCell.innerHTML = "新的列";
    newRow.appendChild(newCell);
    table.appendChild(newRow);
</script>

這段原碼包含一個<table>，並有一個寫著"原本的列"的<tr>，

且能透過JS將一個寫著"新的列"的<tr>動態塞進<table>中，

網頁呈現的最終結果就是包含兩個<tr>的<table>，至少以Chrome來說是這樣，

但很遺憾地，IE沒辦法正確執行，

經過google大神教學後得知，

原來IE在表格的HTML結構要求上較嚴格，<table>下必須要有<tbody>，才能正確執行，

所以說上面的寫法在舊版IE中無法正確執行 (9以下好像都不行，不確定，但10, 11可以)

為了符合如政府部門等廣大的IE用戶的需求，

我們必須改一下原碼寫法，其實只差在多塞一個<tbody>進去就可以啦，如下所示：

<table id="t">
    <tbody id="b">
        <tr><td>原本的列</td></tr>
    </tbody>
</table>

<script>
    var tbody = document.getElementById("b");
    var newRow = document.createElement("tr");
    var newCell = document.createElement("td");
    newCell.innerHTML = "新的列";
    newRow.appendChild(newCell);
    tbody.appendChild(newRow);
</script>

如此這段code就能在舊IE的環境下執行了，棒棒！