[解決済み] AJAXレスポンス(json)からjQueryでテーブルを構築する

質問

重複の可能性 ネストされた要素

サーバーサイドの ajax レスポンス (Json) から、テーブルの行を動的に作成し、既存のテーブルに追加しようとしています。 records_table .

可能な限り複製で解決策を実装しようとしましたが、失敗しました。

私の回答はこのような感じです。

    '[{
      "rank":"9",
      "content":"Alon",
      "UID":"5"
     },
     {
       "rank":"6",
       "content":"Tala",
       "UID":"6"
    }]'

とすると、requireの結果はこのようになります。

<tr>
   <td>9</td>
   <td>Alon</td>
   <td>5</td>  
</tr>
<tr>
   <td>6</td>
   <td>Tala</td>
   <td>5</td>  
</tr>

Jsonをパースせずに何かしたいので、以下のようにやってみましたが、もちろん大失敗でした。

    function responseHandler(response)
    {

        $(function() {
            $.each(response, function(i, item) {
                $('<tr>').html(
                    $('td').text(item.rank),
                    $('td').text(item.content),
                    $('td').text(item.UID)
                ).appendTo('#records_table');

            });
        });


    }

私の解決策から、私はすべてのセルに数字6で1つの行を取得します。私は何を間違えているのでしょうか？

どのように解決するには？

.htmlの代わりに.appendを使用する

var response = "[{
      "rank":"9",
      "content":"Alon",
      "UID":"5"
     },
     {
       "rank":"6",
       "content":"Tala",
       "UID":"6"
    }]";

// convert string to JSON
response = $.parseJSON(response);

$(function() {
    $.each(response, function(i, item) {
        var $tr = $('<tr>').append(
            $('<td>').text(item.rank),
            $('<td>').text(item.content),
            $('<td>').text(item.UID)
        ); //.appendTo('#records_table');
        console.log($tr.wrap('<p>').html());
    });
});