Question

I have the following loop which is giving me problems

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

$.each( results.d, function( index, record ) {
    $("#divResults").append('<tr><td>' + record.ClientCode + '</td></tr>');
});

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

For some reason based on google chromes developer tools, the above code produces the following html

<table></table>
<tr><td>Code 1</td></tr>
<tr><td>Code 2</td></tr>
<tr><td>Code 3</td></tr>
<tr><td>Code 4</td></tr>
<tr><td>Code 5</td></tr>
<tr><td>Code 6</td></tr>
<tr><td>Code 7</td></tr>

How can this be fixed to produce correct HTML?

Answer 1

jQuery operates on elements not tags.

You can’t append a start tag, then some content, then an end tag.

var html = '<table>';
$.each( results.d, function( index, record ) {
    html += '<tr><td>' + record.ClientCode + '</td></tr>';
});
html += '</table>';
$("#divResults").append(html);