在for循环中使用Javascript断点显示表

Question

我有一个使用Javascript填充表的代码:

var myResponse = document.getElementById("jsonPlaceHolder");
myResponse.innerHTML += "<table border=1> <tr> <td> User Id </td> <td> Question </td> <td> Link Question </td>  </tr>";
for (var i = 0; i < 25; i++) {
    myResponse.innerHTML += "<tr>"
    myResponse.innerHTML += "<td>" + jsonObj[i]["user_id"] + "</td>";
    myResponse.innerHTML += "<td>" + jsonObj[i]["text"] + "</td>";
    myResponse.innerHTML += "</tr>"
}
myResponse.innerHTML += "</table>";

这段代码的问题是，当我运行这个表时，它没有在for循环中继续。如果我加上

        myResponse.innerHTML += "<table><tr>"

在for循环中创建表。这不是有点奇怪吗?

因为我使用+=添加到当前的innerHTML的DOM元素。

Answer 1

关于innerHTML最容易被误解的一点是它的API设计方式。它重载+和=操作符来执行DOM插入。这使程序员误以为它只是在做字符串操作，而实际上innerHTML的行为更像是一个函数而不是一个变量。如果innerHTML是这样设计的，人们就不会那么困惑了:

元素。innerHTML('some html here');不幸的是，现在更改API已经太晚了，所以我们必须理解它实际上是一个API，而不仅仅是一个属性/变量。

当你修改innerHTML时，它会触发对浏览器的HTML编译器的调用。它是编译html文件/文档的相同编译器。innerHTML调用的HTML编译器没有什么特别之处。因此，无论你能对html文件做什么，你都可以传递给innerHTML(唯一的例外是嵌入的javascript不会被执行——可能是出于安全原因)。

从浏览器开发人员的角度来看，这是有意义的。为什么要在浏览器中包含两个独立的HTML编译器?尤其是考虑到HTML编译器是巨大而复杂的野兽。

这样做的缺点是，不完整的HTML将以与处理HTML文档相同的方式处理。在元素不在表内的情况下，大多数浏览器会简单地去掉它(正如您自己观察到的)。这就是你要做的——创建无效/不完整的HTML。

解决方案是为innerHTML提供完整的HTML:

    var htmlString = "<table border=1> <tr> <td> User Id </td> <td> Question </td> <td> Link Question </td>  </tr>";
    for (var i = 0; i < 25; i++) {
        htmlString  += "<tr>"
        htmlString  += "<td>" + jsonObj[i]["user_id"] + "</td>";
        htmlString  += "<td>" + jsonObj[i]["text"] + "</td>";
        htmlString  += "</tr>"
    }
    htmlString += "</table>"
    myResponse.innerHTML += htmlString;

Answer 2

使用DOM API来操作DOM:

var myResponse = document.getElementById("jsonPlaceHolder");
var table = document.createElement('table'),
    headings = ["User ID", "Question", "Link Question"];
table.style.border = "1";
var r = table.insertRow(-1);
for (var i = 0; i < 3; i++) {
    (function(){
        return r.insertCell(-1);
    })().innerHTML = heading[i];
}
for (var i = 0; i < 25; i++) {
    r = table.insertRow(-1);
    var userid = r.insertCell(-1),
        text = r.insertCell(-1);
    userid.innerHTML = jsonObj[i]["user_id"];
    text.innerHTML = jsonObj[i]["text"];
}
myResponse.appendChild(table);