How to append ajax return data to a table I am trying to append data to a table based on the ajax returned data. 

My codes work but it seems ugly. I was wondering if anyone here can help me 
to simplfy it. Thanks a lot!

    ajax.callback=function(data){
          for (var i=0; i&lt;dataObj[0].data.length; i++){
              var td=document.createElement('td');
              td.innerHTML=dataObj[0].data[i].ID;
              var td2=document.createElement('td');
              td2.innerHTML=dataObj[0].data[i].test;
              var td3=document.createElement('td');
              td3.innerHTML=dataObj[0].data[i].year;
              var td4=document.createElement('td');
              td4.innerHTML=dataObj[0].data[i].code;
              var td5=document.createElement('td');
              td5.innerHTML=dataObj[0].data[i].Label;
              var td6=document.createElement('td');
              td6.innerHTML=dataObj[0].data[i].contents;
              var td7=document.createElement('td');
              td7.innerHTML=dataObj[0].data[i].test;

              var tr=document.createElement('tr');
              tr.appendChild(td);
              tr.appendChild(td2);
              tr.appendChild(td3);
              tr.appendChild(td4);
              tr.appendChild(td5);
              tr.appendChild(td6);
              tr.appendChild(td7);


              $('#Table').append(tr);

           }
    }
You could do:

ajax.callback=function(data){
    var elements = ["ID", "test", "year", "code", "Label", "contents", "test"];

    for (var i=0; i&lt;dataObj[0].data.length; i++){
        var td;
        var tr=document.createElement('tr');

        for (var j=0; j &lt; elements.length; ++j){
            td = document.createElement('td');
            td.innerHTML=dataObj[0].data[i][elements[j]];
            tr.appendChild(td);
        }

        $('#Table').append(tr);
    }
}