jquery - Add Caption and Thead using javascript -

i have made html table java script not understanding how add caption , thead.

var arr =[ ["period ends", "payroll due", "payday"],    ["06/13/15",    "06/19/15", "06/26/15"],     ];   var body, tab, th, tr, td, tn, row, col; body = document.getelementsbytagname('body')[0]; tab = document.createelement('table'); (row=0; row < arr.length; row++){     tr = document.createelement('tr');     (col=0; col < arr[row].length; col++){         td = document.createelement('td');         tn = document.createtextnode(arr[row][col]);         td.appendchild(tn);         tr.appendchild(td);      }     tab.appendchild(tr); } body.appendchild(tab); 

this approach use

var arr =[     ["period ends", "payroll due", "payday"],        ["06/13/15",    "06/19/15", "06/26/15"], ];   var body = document.getelementsbytagname('body')[0]; var tab = document.createelement('table'); var cap = tab.createcaption(); var tr, td, col;  // set caption cap.innerhtml = 'my table caption';  // start first row (skip row headings) (var row=1; row < arr.length; row++){     tr = tab.insertrow(row-1);      (col=0; col < arr[row].length; col++){         td = tr.insertcell(col);         td.innerhtml = arr[row][col];     } }  // add row headings var header = tab.createthead() var headerrow = header.insertrow(0); (col=0; col < arr[0].length; col++){     td = headerrow.insertcell(col);     td.innerhtml = arr[0][col]; }  body.appendchild(tab); 

this makes use of html-spec methods creating table elements

• createcaption
• insertrow
• createthead
• insertcell
• innerhtml

the quirk found had add thead after body rows

---

here's jsfiddle