jQuery - How to dynamically display table view from JSON response?

function displayAppointmentsInTable(response) {
var table = document.createElement("table");
table.align = 'center';
table.className = 'table table-striped';
table.border = '1px';
var items = [];
var tr = table.insertRow(-1);
//Add Titles for colums
var col = ["Title 1","Title 2","Title 3","Title 4"];
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");      // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
var tr = table.insertRow(-1);
var appointments = jQuery.parseJSON( response);
$.each( appointments, function( index, val ) {
tr = table.insertRow(-1);
var tabCell = tr.insertCell(-1);
tabCell.width = '10%';
var appointmentID = val.bookingID;
tabCell.innerHTML = appointmentID;
tabCell = tr.insertCell(-1);
tabCell.width = '10%';
var displayName = val.fields.name;
tabCell.innerHTML = displayName;
tabCell = tr.insertCell(-1);
tabCell.width = '10%';
var startTime = val.fields.startTime;
tabCell.innerHTML = startTime;
tabCell = tr.insertCell(-1);
tabCell.width = '10%';
var displayName = val.fields.name;
tabCell.innerHTML = "";

});
var divContainer = document.getElementById("appointmentlistingTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}