設置innerHTML無法在Internet Explorer 9.0中工作

Question

我有一個簡單的JavaScript函數，將一行文本框分成多行。 的功能如下：

function newline(componentID) 
{ 

    var cols = document.getElementById(componentId).getElementsByTagName('td'); 
    var colslen = cols.length; 
    var i = -1; 
    var tempInnerHTML = '<tbody><tr>'; 

    while (++i < colslen) 
    { 
     tempInnerHTML += '<td>' + cols[i].innerHTML + '</td>' 
     if (i == 9 || i == 19 || i==29) { tempInnerHTML += '</tr><tr>'; } 
    } 
    tempInnerHTML += '</tr></tbody>'; 
    document.getElementById(componentId).InnerHTML = tempInnerHTML; 

} 

功能工作正常，在FireFox上，但在IE 9.0 的原因是document.getElementById(componentId).InnerHTML = tempInnerHTML; 即我們不能直接設置的innerHTML在IE 9.0

所以我試圖不工作改變上述功能：

function newline(componentID) 
{ 

    var cols = document.getElementById(componentId).getElementsByTagName('td'); 
    var colslen = cols.length; 
    var i = -1; 
    var tempInnerHTML = '<tbody><tr>'; 

    while (++i < colslen) 
    { 
     tempInnerHTML += '<td>' + cols[i].innerHTML + '</td>' 
     if (i == 9 || i == 19 || i==29) { tempInnerHTML += '</tr><tr>'; } 
    } 
    tempInnerHTML += '</tr></tbody>'; 
    var div = document.createElement("div"); 
    div.innerHTML = tempinnerHTML; 
    document.getElementById(componentId).appendChild(div.firstChild.tBodies[0]); 

} 

然而，上述功能不上的FireFox工作，以及IE 9.0 作爲statem問題ent

document.getElementById(componentId).appendChild(div.firstChild.tBodies[0]); 

我需要獲得在FireFox和IE 9.0上工作的函數。

任何幫助將不勝感激。

在此先感謝！

Answer 1

這不適用於任何瀏覽器。

變化

document.getElementById(componentId).InnerHTML = tempInnerHTML; 

到

document.getElementById(componentId).innerHTML = tempInnerHTML; 

JavaScript是區分大小寫的。

---

按照你編輯：您有另一個錯誤：

tempInnerHTML += '</tr></tbody>'; 
var div = document.createElement("div"); 
div.innerHTML = tempinnerHTML; 

您不能一個TBODY添加到一個div。有些瀏覽器可能會嘗試通過插入表來修復它，但這不是指定的行爲。您應該創建一個table元素（並跳過firstChild步驟）。你可能甚至不應該使用這個div或表，這是一個無用的步驟：直接創建tbody並追加它。