爲什麼不按順序執行此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); 
});