jQuery 附加表会自动在文本末尾添加结束标记。为什么？

Question

$('#all_locations').append("<table>");
$('#all_locations').append("<tr><th>City</th></tr>");

$.each(data, function(i, item){
    $('#all_locations').append("<tr>");
    $('#all_locations').append("<td>"+item.city+"</td>");
    $('#all_locations').append("<tr>");
}

$('#all_locations').append("</table>");

使用alert($('#all_locations').html());得到的输出

<table></table>
<tr><th>City</th></tr>
<tr></tr><td>Seattle</td>
<tr></tr><td>Chicago</td>

此代码在 ajax 调用完成时触发。任何想法为什么会这样做？

假设数据变量是有效的 JSON 对象。

Answer 1

尽管 jQuery 提供了抽象，但您操作的是 DOM 中的 元素，而不是 HTML 源代码中的标签。

jQuery('<table>') 是jQuery(document.createElement('table')) 的简写。

您需要将表格行附加到表格，而不是容器（同样，需要将单元格添加到行）。

Answer 2

最好的做法是创建一个 HTML 字符串来附加并在该字符串上运行一个 .append() 调用：

//declare our output variable
var output = '<table><tr><th>City</th></tr>';

//iterate through data
$.each(data, function(i, item){

    //add to output variable
    output += '<tr><td>' + item.city + '</td></tr>';
}

//append the output to the DOM
$('#all_locations').append(output);

看到人们将项目推入数组并加入该数组以进行追加是很常见的：

//declare our output variable (array)
var output = ['<table><tr><th>City</th></tr>'];

//iterate through data
$.each(data, function(i, item){

    //add to output variable
    output.push('<tr><td>' + item.city + '</td></tr>');
}

//append the output to the DOM after joining it together into a string
$('#all_locations').append(output.join(''));

Answer 3

在标签中添加id 来解决这个问题。 然后将子元素添加到 id 而不是父元素。

$(function(){

    for(var lvl=0;lvl<5;lvl++)
    {
        $("#tblId tbody").append("<tr id="+lvl+"/>");                   
        for(var fchr=0;fchr<3;fchr++)
            $("#tblId tbody #"+lvl).append("<td>Val"+lvl+fchr+"</td>");
    }

    alert($('#tblId').html());

});

运行示例，请参见此处： http://jsfiddle.net/WHscf/1/

Answer 4

不要那样做，试试这样的：

var table = $("<table>");
if (table){
    table.append($("<tr>").append($("<th>").text("City")));
    $.each(data, function(i, item){
        table.append($("<tr>").append($("<td>").text(item.city)));
    });
    table.appendTo($("#all_locations"));
}

这是另一种更接近您目前的做法的方式：

$("#all_locations""#all_locations").append("<tr><th>City</th></tr>"); 

$.each(data, function(i, item){  
    $('#all_locations').append("<tr>");  
    $('#all_locations').append("<td>""<tr><td>" + item.city + "</td>"td></tr>");  
    $('#all_locations').append("<tr>"});  
} 

$("#all_locations tr").wrapAll("<table></table>");