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元素在错误的地方

回答

相关问题