Q:

how can i append a new  to nth  using jquery?

im trying to create a tic-tac-toe board dynamically using a nested loop, i got this much:
    //fill grid using jquery
for ( i = 0 ; i < 3 ; i++ ) {

        //add a row
    $("#grid").append("<tr>");

        //3 rows, 3 columns 
    for ( var j = 0 ; j < 3 ; j++ ) {

            //write cell
        $("#grid").append("<td>").data("id", i * 3 + j );
    }
}

however this generates the following html:
<table id="grid">

    <tbody>
        <tr></tr>
        <tr></tr>
        <tr></tr>
    </tbody>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>

</table>

how can i append the <td>s so that they get added to the correct <tr>?

A:

You have to add the cells to the row, not directly to the table:
//fill grid using jquery
for (var i = 0; i < 3; i++) {

  //add a row
  var row = $("<tr>");
  $("#grid").append(row);

  //3 rows, 3 columns 
  for (var j = 0; j < 3; j++) {

    //write cell
    var cell = $("<td>").data("id", i * 3 + j);
    row.append(cell);
  }
}

