jQuery將表追加到div

Question

我有一個div id 。我必須向div id追加一個帶有值的表。

<div id="testResult" style="padding-left: 120px; "></div>

正在執行以下步驟，但無法正常工作。

$.ajax({
    url: '/getReports',
    cache: false
}).done(function (html) {
    if (html != "") {
        $('#testResult').show();
        var htm = "";

        var string1 = '<table border="1"><tr><td>No</td><td>Testcase</td> <td>OS</td> <td>Browser</td>  <td>Result</td></tr></table>';
        $.each(html, function (i, data) {

            string1 + = '<tr><td rowspan="3">1</td><td rowspan="3">' + data.status.test + '</td><td rowspan="3"><!--OS--></td><td>' + data.status.bwser + '</td> <td> ' + data.status.report + ' </td></tr>';
        });
        $('#testResult ').append(string1);
        $("#testResult").html("<br/><br/>");
        $("#testResult").html("<p>" + htm + "</p>");
    }

}).fail(function () {
    $("#testResult").html("Failed to run the test");
    $('#edit ').removeAttr("disabled");
});

Answer 1

$("#testResult").html("<br/><br/>")和$("#testResult").html("<p>" + htm + "</p>")將覆蓋內容您的“ testResult” DIV。 所以，取代這個

$('#testResult ').append(string1);
      $("#testResult").html("<br/><br/>");
      $("#testResult").html("<p>" + htm + "</p>");   
}

與

$('#testResult ').append(string1);
      $("#testResult").append("<br/><br/>");
      $("#testResult").append("<p>" + htm + "</p>");   
}

.append（） ：將額外的字符串添加或附加到DIV的現有內容中，其中

.html（） ：將刪除或覆蓋較新版本的DIV的現有內容。

這是.append()和.html()之間的主要區別。

Answer 2

編輯這部分

   $("#testResult").append("<br/><br/>");
  Remove this part-->
  $("#testResult").html("<p>" + htm + "</p>");   

htm是空字符串，因為您永遠不會將任何字符串連接到它