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

问题与此代码是当我运行这个表不是为循环内持续。如果我添加

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