innerHTML元素在錯誤的地方

我對innerHTML的理解並不完全清楚，所以我遇到了一些麻煩。innerHTML元素在錯誤的地方

這產生了我所有的表外的TD。我究竟做錯了什麼？

var list = document.getElementById("procTable"); 
list.innerHTML = "<table style='border:gray solid 1px;'><tr>"; 
for (var i = 0; i < result.d.ProcessDataColumnModel.length; i++) { 
    list.innerHTML += "<td style='border:gray solid 1px' width='" + (result.d.ProcessDataColumnModel[i].Width) + "'>" + (result.d.ProcessDataColumnModel[i].Caption); 
}

來源

2012-03-14 John Kinane

使用IE8但在Chrome中也有相同的結果 – 2012-03-14 15:29:24

你能詳細說明你是什麼意思的「以外的表」？也許發佈一段代碼產生的HTML代碼片段？ – MrMisterMan 2012-03-14 15:29:33

提示：在您修改之前，您在列表**中有什麼？ – 2012-03-14 15:31:00

由於您追加了無效的HTML，因此瀏覽器通過添加錯過的元素來幫助您。然後，當你添加你的表格單元格時，它們會在關閉的表格後面追加。

嘗試添加表格，然後行，然後單元格。另外，首先構建整個字符串，然後一次追加它，更新DOM（即使用innerHTML）是一個緩慢的操作。

var list = document.getElementById("procTable"); 
var listInner = "<table style='border:gray solid 1px;'><tr>"; 
for (var i = 0; i < result.d.ProcessDataColumnModel.length; i++) { 
    listInner += "<td style='border:gray solid 1px' width='" + (result.d.ProcessDataColumnModel[i].Width) + "'>" + (result.d.ProcessDataColumnModel[i].Caption) + "</td>"; 
} 
listInner += "</tr></table>"; 
list.innerHTML = listInner;

來源

2012-03-14 15:30:36 robertc

謝謝。什麼是無效的？ – 2012-03-14 15:34:50

@JohnKinane標記'

'本身是無效的。它至少需要一個ch ild''，它需要兩個元素的結束標記。瀏覽器會爲你創建所有的東西，但是當你的「+ =」不在表格內時。 – robertc2012-03-14 15:36:22

我明白了，但是當我編寫關閉標籤的版本時，除了我寫的內容之外，還添加了他們。 – 2012-03-14 15:38:01

如果您沒有正確關閉標籤，有時會發生這種情況。在你的例子中：

var list = document.getElementById("procTable"); 
list.innerHTML = "<table style='border:gray solid 1px;'><tr>"; 
for (var i = 0; i < result.d.ProcessDataColumnModel.length; i++) { 
    list.innerHTML += "<td style='border:gray solid 1px' width='" + (result.d.ProcessDataColumnModel[i].Width) + "'>" + (result.d.ProcessDataColumnModel[i].Caption)+ "</td>"; 
} 
list.innerHTML += "</tr></table>";

來源

2012-03-14 15:31:24

我試過這個，但是innerHTML在它們後面添加了重複的標籤，這真的很奇怪。 – 2012-03-14 15:35:39

相關問題

innerHTML元素在錯誤的地方

回答

相關問題