jquery - Some misunderstanding with creating dynamic table in JavaScript -

After

I try to create a dynamic table using javascript, the table contains the first names and family names.

Here is the JavaScorpt code:

  function CreatTable () {var tablearea = document.getElementById ('ShowDataID'); Var table = document.createElement ('table'); Var thead = document.createElement ("thead"); Var tr = document.createElement ('tr'); Var th = document.createElement ('th'); Var firstNameTxt = document.createTextNode ("first name"); Th.appendChild (firstNameTxt); Tr.appendChild (th); Thead.appendChild (tr); Table.appendChild (thead); Var familyNameTxt = document.createTextNode ("Family name"); Th.appendChild (familyNameTxt); Tr.appendChild (th); Thead.appendChild (tr); Table.appendChild (thead); (Var i = 1; i <4; i ++) for {var tr = document.createElement ('tr'); Tr.appendChild (document.createElement ('TD')); Tr.appendChild (document.createElement ('TD')); Tr.cells [0] .appendChild (document.createTextNode ('John')) tr.cells [1] .appendChild (document.createTextNode ('McDowell')) table.appendChild (tr); } Tablearea.appendChild (table); }  

and here results I:

My question is why do I get" McDowell "not under the name of the family name column. Why has it moved? What am I missing?

Try to create a new th second time, already used Do not use one of the

  function CreatTable () {var tablearea = document.getElementById ('ShowDataID'); Var table = document.createElement ('table'); Var thead = document.createElement ("thead"); Var tr = document.createElement ('tr'); Var th = document.createElement ('th'); Var firstNameTxt = document.createTextNode ("first name"); Th.appendChild (firstNameTxt); Tr.appendChild (th); Thead.appendChild (tr); Table.appendChild (thead); // ********* Look here *************************************************************************************************** FamilyNameTxt = document.createTextNode Th = document.createElement ('th'); // Create a new one here. Do not use the old one. ********* Look here ********* tr.appendChild (th); Thead.appendChild (tr); Table.appendChild (thead); (Var i = 1; i <4; i ++) for {var tr = document.createElement ('tr'); Tr.appendChild (document.createElement ('TD')); Tr.appendChild (document.createElement ('TD')); Tr.cells [0] .appendChild (document.createTextNode ('John')) tr.cells [1] .appendChild (document.createTextNode ('McDowell')) table.appendChild (tr); } Tablearea.appendChild (table); }