Question

我试图做一些非常简单的事情，但由于某种原因，我无法发现我的错误。函数末尾的语句似乎在for循环之前执行，我确定不是这样。

var object = {
    "key1":"foo",
    "key2":"bar"
}

var message = document.getElementById("message");

message.innerHTML = "<table>";

for(var index in object) {
    if (object.hasOwnProperty(index)) {
        message.innerHTML += "<tr><td>" + index + "</td><td>" + object[index] + "</td></tr>";
    }
}

message.innerHTML += "</table>";

我认为这会创建字符串：

<table>
    <tr><td>key1</td><td>foo</td></tr>
    <tr><td>key2</td><td>bar</td></tr>
</table>

然而，当我检查元素时，我得到了这个结果：

<div id="message">
    <table></table> <!-- why would </table> be in the string before key1 etc.? -->
    key1fookey2bar
</div>

当我用换行符替换表时，看起来循环正在执行，所以我不确定发生了什么。谁能发现我的错误？

Answer 1

这是因为您直接附加到消息的innerHTML。

使用变量构建html，然后设置message.innerHTML =该变量。

如：

var messageElement = document.getElementById("message");
var message = "<table>";

for(var index in object) {
    if (object.hasOwnProperty(index)) {
        message += "<tr><td>" + index + "</td><td>" + object[index] + "</td></tr>";
    }
}

message += "</table>";
messageElement.innerHTML = message;

从JavaScript对象创建HTML表时，函数似乎是非顺序执行的

1 个答案: