title: Moving first row of csv into header HTML
body: <p>I create a table with ajax, but can't seem to enclose the <code>&lt;th&gt;</code> elements inside the <code>&lt;tr id="header"&gt;</code>. I've tried the <code>appendTo</code>, <code>prependTo</code>, but no luck.</p>
  
  <p>The structure I want is: <code>&lt;Table&gt;&lt;Thead&gt;&lt;tr&gt;&lt;th&gt;</code>, so that the data that would go in <code>th</code> would be children to <code>#header</code>, not siblings</p>
  
  <pre><code>function arrayToTable(tableData) {
      var table = $('&lt;table id = "data_table"&gt;&lt;/table&gt;');
      $(tableData).each(function (i, rowData) {
          if (i==0){
              var row = $('&lt;thead class= "table_header"&gt;&lt;tr id="header"&gt;&lt;/tr&gt;&lt;/thead&gt;');
  
              $(rowData).each(function (j, cellData) {
              $('#header').append($('&lt;th&gt;'+cellData+'&lt;/th&gt;'));
          });
          table.append(row);
          } else{
              var row = $('&lt;tr class="table_data"&gt;&lt;/tr&gt;');
              $(rowData).each(function (j, cellData) {
              row.append($('&lt;td&gt;'+cellData+'&lt;/td&gt;'));
              });
          table.append(row);
          }
      });
      return table;
  }
  
  $.ajax({
      type: "GET",
      url: "random/folder/with/csvs/csv1.csv",
      success: function (data) {
          $('#container').append(arrayToTable(Papa.parse(data).data));
      }
  });
  </code></pre>