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循环中，创建了表。这有点奇怪吗？

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

Answer 1

关于innerHTML最容易被误解的事情之一源于API的设计方式。它重载了+和=运算符以执行DOM插入。这使得程序员认为它只是在进行字符串操作，而实际上innerHTML的行为更像是函数而不是变量。如果innerHTML是这样设计的，那么人们就不那么容易混淆了：

element.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);

使用Javascript显示表在内部循环for循环

2 个答案: