jQuery appended table adds closing tag at the end

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>");

Output gotten using alert($('#all_locations').html());

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

This code fires when ajax call is finished. Any ideas why is it doing so?

Assume that data variable is the valid JSON object.

Answer 1

Add an id to the tag to solve this problem. Then add the sub element to that id instead of parent element.

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

});

Running example, see here: http://jsfiddle.net/WHscf/1/

Answer 2

Instead of doing it that way, try something like this:

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

Here's another way that's closer to how you're currently doing it:

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

Answer 3

It's best practice to create a string of your HTML to append and run one .append() call on that string:

//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);

It's pretty common to see people pushing items into an array and joining that array for the append:

//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 4

Despite the abstraction that jQuery offers, you are operating on elements in the DOM, not tags in the HTML source.

jQuery('<table>') is shorthand for jQuery(document.createElement('table')).

You need to append your table rows to the table, not to the container (and likewise, the cells need to be added to the rows).