title: Using jQuery to build table rows from AJAX response(json)
body: <p>Possible duplicate <a href="https://stackoverflow.com/questions/5317890/how-do-i-create-these-nested-dom-elements-with-jquery">Nested elements</a></p>
  
  <p>I'm getting from server-side ajax response (Json) and I'm trying to dynamically create table rows and append them to an existing table with id=<code>records_table</code>.</p>
  
  <p>I tried to implement the solution in possible duplicate but it failed.</p>
  
  <p>My response looks like that:</p>
  
  <pre><code>    '[{
        "rank":"9",
        "content":"Alon",
        "UID":"5"
       },
       {
         "rank":"6",
         "content":"Tala",
         "UID":"6"
      }]'
  </code></pre>
  
  <p>the require result is something like that:</p>
  
  <pre><code>&lt;tr&gt;
     &lt;td&gt;9&lt;/td&gt;
     &lt;td&gt;Alon&lt;/td&gt;
     &lt;td&gt;5&lt;/td&gt;  
  &lt;/tr&gt;
  &lt;tr&gt;
     &lt;td&gt;6&lt;/td&gt;
     &lt;td&gt;Tala&lt;/td&gt;
     &lt;td&gt;5&lt;/td&gt;  
  &lt;/tr&gt;
  </code></pre>
  
  <p>I want to do something without parsing the Json so I tried to do the following, which of course was a disaster:</p>
  
  <pre><code>    function responseHandler(response)
      {
  
          $(function() {
              $.each(response, function(i, item) {
                  $('&lt;tr&gt;').html(
                      $('td').text(item.rank),
                      $('td').text(item.content),
                      $('td').text(item.UID)
                  ).appendTo('#records_table');
  
              });
          });
  
  
      }
  </code></pre>
  
  <p>From my solution I get only one row with the number 6 in all cells. What am I doing wrong?</p>