Question

我对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);
}

Answer 1

由于您附加了无效的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;

Answer 2

如果您没有正确关闭标签，有时会发生这种情况。在你的例子中：

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

innerHTML元素位置错误

2 个答案: