How to get correct table format ? Jquery ques..

Question

This code prints output as given below... code:

$('#calendar').append('<table><thead><tr>');
    var i;
    for(i=0;i<=6;i++)
        {
            $('#calendar').append('<td>'+week[i]+'</td>');
        }
    $('#calendar').append('</tr></thead>');
    $('#calendar').append('</table>');

output:

<section id="calendar"><table><thead><tr></tr></thead></table><td>Sunday</td><td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td><td>Saturday</td></section>

But i expect something in this structure..

<table><thead><tr><td>...</td></tr></thead></table>

Answer 1

I think appending in jQuery appends tags, rather than just text. Did you try to examine the intermediate results? Your first line will already result in <table><thead><tr></tr></thead></table> being appended to the section.

You can build the entire string you want to append, and then append it in one call.

Answer 2

jQuery appends elements , not the literal text...since it's immediately appended to the DOM the way you're currently doing it, you'll get some very funny behavior, since you're starting with unclosed tags (which it closes for you to prevent errors).

You just need to change your approach a bit, but doing it right also means even less code, like this:

var row = $('<table><thead><tr></tr></thead></table>').find('tr');
for(var i=0; i<=6; i++) {
    $('<td />', { text: week[i] }).appendTo(row);
}
row.end().appendTo('#calendar');​

You can view a working demo here, this creates the table using $(html), a document fragment, we then .find() the row and keep a handy reference to it, create the <td> elements one by one using $(html, props), and add them to the row using .appendTo(). After we've added them all, call .end() to change the chain to what it was before the .find() was called...in this case the entire <table>, then just append that table to the #calendar element :)