How can I prepend table headers to html table that was created using getJSON() function in jQuery

Question

I am stumped on how to prepend the following thead HTML code to an HTML table that I have generated using the getJSON method in jQuery.

Here's the fiddle: http://jsfiddle.net/point71echo/uno9bfds/1/

HTML to be added:

<thead>
    <tr>
        <th>Foundation</th><th>Name</th><th>Title</th><th>Department</th><th>Email</th><th>Office Phone</th><th>Cell</th><th>Fax</th><th>Board Title</th><th>Url</th><th>Foundation Type</th>
    </tr>
</thead>

Code currently used:

<script type="text/javascript">
$.getJSON( "https://spreadsheets.google.com/feeds/list/1bDcIQjGZ6-gZVoUL-4apB0O1A-VDaEP8gLQbOUwJLuE/od6/public/values?alt=json-in-script&callback=?", function( data ) {
  var items = [];
  $.each( data.feed.entry, function( i, entry ) {

  var logourl = entry.gsx$logourl.$t;
  var foundation = entry.gsx$foundation.$t;
  var name = entry.gsx$name.$t;
  var title = entry.gsx$title.$t;
  var department = entry.gsx$department.$t;
  var email = entry.gsx$email.$t;
  var officephone = entry.gsx$officephone.$t;
  var cell = entry.gsx$cell.$t;
  var fax = entry.gsx$fax.$t;
  var boardtitle = entry.gsx$boardtitle.$t;
  var url = entry.gsx$url.$t;
  var foundationtype = entry.gsx$foundationtype.$t;

  if(foundationtype == "Family Foundation"){
    catlink = "<a href='/foundations/family-foundations/'> Family Foundation</a>";
  }
  else if(foundationtype == "Community Foundation"){
    catlink = "<a href='/foundations/community-foundations/'> Community Foundation</a>";
  }

  if (email.match(/mailto:.*/)) {
      var visibleEmail = email.substring(7);
      var newEmail = '<a href="' + email + '">' + visibleEmail + '</a>';
  }
  else if(email.match(/[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]*(\.[a-z]{2,3})/i)){
    var newEmail = '<a href="mailto:' + email + '">' + email + '</a>';
  }
  else{
    var newEmail = 'No Email found';
  }

      //items.push("<table><tr><td>"+url+"</td></tr>");

      //items.push("test");
      items.push("<tr class='rows tablerow "+foundationtype+"2'>");
      items.push("<td style='word-wrap:break-word'>" + foundation + "</td>");
      items.push("<td style='word-wrap:break-word'>" + name + "</td>");
      items.push("<td style='word-wrap:break-word'>" + title + "</td>");
      items.push("<td style='word-wrap:break-word'>" + department + "</td>");
      items.push("<td style='word-wrap:break-word'>" + newEmail + "</td>");
      items.push("<td style='word-wrap:break-word'>" + officephone + "</td>");
      items.push("<td style='word-wrap:break-word'>" + cell + "</td>");
      items.push("<td style='word-wrap:break-word'>" + fax + "</td>");
      items.push("<td style='word-wrap:break-word'>" + boardtitle + "</td>");
      items.push("<td style='word-wrap:break-word'>" + url + "</td>");
      items.push("<td style='word-wrap:break-word'>" + foundationtype + "</td></tr>");
  });

  $( "<table/>", {
    "class": "sortable tableData",
    html: items.join( "" )
  }).appendTo( "#list-view" );
});

</script>

    <div id="list-view"></div> 

My goal is to get the Thead section directly after the opening Table tag. Like this...

<table class="sortable tableData">
<thead>
    <tr>
        <th>Foundation</th>
        <th>Name</th>
        <th>Title</th>
        <th>Department</th>
        <th>Email</th>
        <th>Office Phone</th>
        <th>Cell</th>
        <th>Fax</th>
        <th>Board Title</th>
        <th>Url</th>
        <th>Foundation Type</th>
    </tr>
</thead>
<tbody>...</tbody>
</table>

Answer 1

Are you looking for this?

    $("<table/>", {
        "class": "sortable tableData",
        html: items.join("")
    }).appendTo("#list-view");

    $("table").prepend("<thead> <tr>  <th>Foundation</th><th>Name</th><th>Title</th><th>Department</th><th>Email</th><th>Office Phone</th><th>Cell</th><th>Fax</th><th>Board Title</th><th>Url</th><th>Foundation Type</th> </tr></thead>");

Updated jsfiddle: http://jsfiddle.net/uno9bfds/2/