Почему этот Javascript-код не выполняется последовательно?

Question

Использование jQuery Я звоню на свой сервер, который возвращает некоторый json. Затем я получаю обратный вызов с использованием .done для создания обратного вызова, который, похоже, не ведет себя последовательно.

У меня есть DIV в моем 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 возвращает что-то, но withint, который вызывает, он должен вести себя последовательно правильно? Есть 2 вещи, я действительно не понимаю здесь:

1. Почему строка таблицы и данные пишутся после</table> тега?
2. И почему на земле делает <tr></tr> будет написано перед тем в <td> тегах, даже если последний </tr> добавляется вместе с последним <td> in the last Append() `в цикле Еогеаспа?

Так я и пытался прилагая всю строку таблицы на одном дыхании:

$("#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); 
});