为什么不按顺序执行此JavaScript代码？

Question

使用jQuery我正在对我的服务器进行调用，该服务器返回一些json。然后我有一个使用.done定义的回调来创建一个回调，这似乎不是按顺序执行的。

我有我的HTML（<div id="properties"></div>）一个div，我试图填补这一分度结果表：

request.done(function(data){ 
    if (data['result'].length == 0) { 
     $("#properties").html("<h3>No results were found..</h3>"); 
    } else { 
     $("#properties").html("<table><thead><tr><th>Status</th><th>Title</th></tr></thead><tbody>"); 
     data['result'].forEach(function(prop){ 
      $("#properties").append("<tr>"); 
      $("#properties").append("<td>prop.status</td>"); 
      $("#properties").append("<td>prop.title</td></tr>");  
     }); 
     $("#properties").append("</tbody></table>"); 
    } 
}); 

结果我得到的是这样的：

<div id="properties"> 
    <table class="table table-hover"><thead><tr><th>Status</th><th>Title</th></tr></thead><tbody></tbody></table> 
    <tr></tr> 
    <td>prop.status</td> 
    <td>prop.title</td> 
</div> 

我知道.done是只调用一次的ajax调用返回的东西，但没有那个调用，它应该表现顺序对吗？有两件事情我真的真的不明白这里：

1. 为什么表行和数据被写入的</table>标签之后？
2. 为什么在地球上的<tr></tr>被前的<td>标签写，即使最后</tr>与最后<td> in the last的append（）`在foreach循环一起追加？

所以我也试过一次性追加整个表行：

$("#properties").append("<tr><td>prop.status</td><td>prop.title</td></tr>"); 

这工作好一点，但仍然只生产这样的：

<div id="properties"> 
    <table class="table table-hover"><thead><tr><th>Status</th><th>Title</th></tr></thead><tbody></tbody></table> 
    <tr><td>prop.status</td><td>prop.title</td></tr> 
</div> 

的Javascript之前我迷惑不解，但这真的让我大开眼界。任何提示都欢迎！

Answer 1

你在这里看到的是关闭你的标签，因为这些元素是在append/html中创建的。为了得到你期望在字符串中构建的行为，可以这样说：

request.done(function(data){ 
    if (data['result'].length == 0) { 
     $("#properties").html("<h3>No results were found..</h3>"); 
    } else { 
     var propertiesTableHTML = "<table><thead><tr><th>Status</th><th>Title</th></tr></thead><tbody>"; 
     data['result'].forEach(function(prop){ 
      propertiesTableHTML += "<tr>"; 
      propertiesTableHTML += "<td>" + prop.status + "</td>"; 
      propertiesTableHTML += "<td>" + prop.title + "</td>"; 
      propertiesTableHTML += "</tr>"; 
     }); 
     propertiesTableHTML += "</tbody></table>"; 
     $("#properties").html(propertiesTableHTML); 
    } 
}); 

Answer 2

您不能向DOM添加标签，只能添加元素。当您尝试添加<table>标记时，它将添加完整的table元素。当您尝试添加结束标记时，它将被忽略（或者可能导致错误，取决于浏览器），因为它不是可以解析为元素的代码。

重写代码，而不是添加的标签元素：

$("#properties").html("<table><thead><tr><th>Status</th><th>Title</th></tr></thead><tbody></tbody></table>"); 
var tbody = $("#propertis tbody"); 
data['result'].forEach(function(prop){ 
    var row = $("<tr>"); 
    row.append($("<td>").text(prop.status)); 
    row.append($("<td>").text(prop.title)); 
    tbody.append(row); 
}); 

通过创建表格单元格的内容，并使用text方法来设置的内容，则避免与需要HTML编码的任何特殊字符的问题（例如<,>,&）搞砸了HTML代码。

Answer 3

您期待.html()和.append()像document.write()一样工作，但他们没有。当与HTML一起使用时，他们期望正确的HTML。损坏的HTML（例如缺少结束标记）被纠正，导致意外的行为。你的代码，例如该部分：

$("#properties") 
    .html("<table><thead><tr><th>Status</th><th>Title</th></tr></thead><tbody>"); 

产生以下结果：

<table> 
    <thead> 
     <tr> 
      <th>Status</th> 
      <th>Title</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody><!-- tag closed automatically --> 
</table><!-- tag closed automatically --> 

按照同样的思路，这样的代码：

$("#properties").append("<tr>"); 
$("#properties").append("<td>prop.status</td>"); 
$("#properties").append("<td>prop.title</td></tr>"); 

产生以下结果：

... 
</table> 
<tr></tr><!-- tag closed automatically --> 
<td>prop.status</td> 
<td>prop.title</td><!-- </tr> ignored --> 

一种可能性乐的解决办法是修改你的代码是这样的：

$("#properties").html("<table><thead><tr><th>Status</th><th>Title</th></tr></thead><tbody></tbody></table>"); 
data['result'].forEach(function(prop){ 
    var $tr = $("<tr></tr>").appendTo("#properties > table > tbody"); 
    $("<td></td>").text(prop.status).appendTo($tr); 
    $("<td></td>").text(prop.title).appendTo($tr); 
});