I'm creating a table dynamically from a xml using the following code

2. function showData() {
3. $.ajax({
4. type:"GET",
5. url:"test1.xml",
6. dataType:"xml",
7. success: function(xml){
8. var fila = $(xml).find("Row");
9. var tabla = $("<table />");
10. tabla[0].border = "1";
12. var row = $(tabla[0].insertRow(-1));
14. fila.eq(0).children().each(function() {
15. var headerCell = $("<th />");
16. headerCell.html(this.nodeName);
17. row.append(headerCell);
18. });
20. $(fila).each(function() {
21. row = $(tabla[0].insertRow(-1));
22. $(this).children().each(function() {
23. var cell = $("<td />");
24. cell.html($(this).text());
25. row.append(cell);
26. });
27. });
29. var dvTable = $("#dvTable");
30. dvTable.html("");
31. dvTable.append(tabla);
32. }
34. })
35. }

It creates the table as follow

<table>

      <tbody>

            <tr>

                  <th>...</th>

                  ....

            </tr>

            <tr>

                  <td...</td>

                   ...

            <t/tr>

            ...

      </tbody>

</table>

How can I make it so that it creates the THEAD tag before the TBODY and add the TH columns inside the THEAD??

Any help would be greatly appreciated. 

Thanks