problems with htmltags and appendto()

problems with htmltags and appendto()

hey guys i wanna rewrite this:

http://net.tutsplus.com/tutorials/php/a ... -and-json/

but i have some problems.. the original code to show the comments is:


$.getJSON("comments.php?jsoncallback=?", function(data) {
            
               //loop through all items in the JSON array
               for (var x = 0; x < data.length; x++) {
               
                  //create a container for each comment
                  var div = $("<div>").addClass("row").appendTo("#comments");
                  
                  //add author name and comment to container
                  $("<label>").text(data[x].name).appendTo(div);
                  $("<div>").addClass("comment").text(data[x].comment).appendTo(div);
               }
            });   

but my html code is:


         <tr>
         <td class="field main"><br />
      <table class="my-inner" border="0" cellpadding="0" cellspacing="0">
         <tbody>
      <tr class="ge-row">
                      <td colspan="2" valign="top" class="kommentar-name">#{$array.id} von {$array.author} am {$array.added}</td>
      </tr>
      <tr class="ge-row">
                      <td valign="top" class="kommentar-avatar"><img src="{$array.avatar}" /></td>
                      <td valign="top" class="kommentar-text">{$array.body}</tr>
         </tr>
       </tbody>
     </table>
     </td>
   </tr>


css:
.field {
   background:#CDE1FD;
}
.main, .field p {
   padding:5px;
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size:12px;
   color: #2660b2;

}
#main {
   vertical-align:top;
}
.my-inner {
   width:100% !important;
   margin:0 auto;
   border: 1px dashed #151515;

}
.ge-row {
   background:#B8D2F7;
}
.kommentar-avatar {
    width:102px;
    padding:0 0 2px 0 !important;
}
.kommentar-avatar img {
    max-width:100px;
    max-height:100px;
}
.kommentar-name {
    padding:0 !important;
    text-align:left !important;
    font-weight:bold;
}
.kommentar-text {
    text-align:left !important;
    padding:0 0 2px 5px !important;
    vertical-align:top !important;
}



i try and try and try... but i cant rewrite my html code to work with the javascript part plz help meee