Javascript：无法在我的表中添加新行，而是覆盖现有行

Question

我正在尝试使用javascript在我的表中添加包含联系信息的新行。我有弹出窗体，我添加了所有用户信息，保存在数组中，我希望在我的表中看到这些数据，但是当我运行它时给我错误并覆盖现有行而不是创建一个新行与新联系人数据

＆＃39; app.js：176 Uncaught TypeError：无法设置属性＆＃39; innerHTML＆＃39;未定义的     在HTMLButtonElement。＆＃39;

谢谢你，感谢你的帮助！

这是我的Js代码：

var tableContacts = document.getElementById("tablecontact").getElementsByTagName("tbody")[0];
const BtnForm = document.getElementById("submitBtn"); /* inside form */
const contactDiv = document.getElementById("contactDiv");
const containerDiv = document.getElementById("containerDiv");

var newTr;
var newTdEmpty;
var newTdName;
var newTdEmail;
var newTdtel;
var newTdTitle;
var newTdCompany;
var tdCheckbox;

var creatElements = function () {

    for (var i = 0; i < tableContacts.rows.length; i + 1) {
        newTr = document.createElement("tr");
        newTdEmpty = document.createElement("td");
        newTdName = document.createElement("td");
        newTdEmail = document.createElement("td");
        newTdtel = document.createElement("td");
        newTdTitle = document.createElement("td");
        newTdCompany = document.createElement("td");
        tdCheckbox = document.createElement("td");

    //var span = document.createElement("span");
    //for checkbox
    const checkbox = document.createElement('INPUT');
    checkbox.type = "checkbox";
    checkbox.name = "checkBox";
    tdCheckbox.appendChild(checkbox);
    tdCheckbox.setAttribute('id', 'checkTD');
    tdCheckbox.setAttribute('class', 'select-checkTD');

    newTr.appendChild(newTdEmpty); // the first cell (td) should be empty
    newTr.appendChild(tdCheckbox);
    newTr.appendChild(newTdName);
    newTr.appendChild(newTdEmail);
    newTr.appendChild(newTdtel);
    newTr.appendChild(newTdTitle);
    newTr.appendChild(newTdCompany);
    //appending newTrow in the table
    tableContacts.appendChild(newTr);

    }

}

var personList = [];

var Person = function (fullname, email, tele, title, company) { 

    this.fullname = fullname;
    this.email = email;
    this.tele = tele;
    this.title = title;
    this.company = company;
}

BtnForm.addEventListener('click', function (event) {
    event.preventDefault();

    var fullname = document.getElementById("fullname").value;
    var email = document.getElementById("email").value;
    var phone = document.getElementById("tele").value;
    var title = document.getElementById("title").value;
    var company = document.getElementById("company").value;


    if (document.getElementById('fullname').value == "" || document.getElementById('email').value == ""
        || document.getElementById('tele').value == "" || document.getElementById('title').value == ""
        || document.getElementById('company').value == "") {
        alert("Fill All Fields !");
    } else {

        var newPerson = new Person(fullname, email, phone, title, company);


        personList.push(newPerson);

        for (var p of personList) {
            newTdEmpty.innerHTML = "";
            newTdName.innerHTML = p.fullname;
            newTdEmail.innerHTML = p.email;
            newTdtel.innerHTML = p.tele;
            newTdTitle.innerHTML = p.title;
            newTdCompany.innerHTML = p.company;
        }

        alert("Form Submitted Successfully...");
        document.getElementById('form').reset(); // clear the form textInput, Reset all form data
        div_hide();

        creatElements(); // function which creates new rows
        return true;
    }
});

我的HTML代码：

<table  id="table-contact">
     <thead>
      <tr>
         <th class="left-border"> All Contacts</th>
          <th style="width:3px;"></th> <!--for checkBox-->
          <th> Contact</th>
          <th> Email </th>
          <th>phone </th>
          <th> Lead Title</th>
          <th> Company</th>
      </tr>

     </thead>
        <tbody id="tbody">
          <tr>
              <td>All contacts </td>
              <td><span class="logo"><input type="checkbox" class="checkBox" /></span> </td>
              <td>ExampleName</td>
              <td>Example@gmail.com</td>
              <td>0709999999</td>
              <td>Web Developer</td>
              <td>CountryName</td>

          </tr>



        </tbody>

    </table>

</section>

<!--The hidden contact form-->
<div id="containerDiv" style="overflow:hidden">

   <div id="popupContactForm">
       <form id="form" name="addContactForm" action="#" method="post">
           <img id="close" src="images/cancel.png" onclick="div_hide()">
           <p>Add Contact</p>

           <input type="text" name="name" id="fullname" placeholder="FullName">
           <input type="text" name="email" id="email" placeholder="Email" />
           <input type="text" name="tel"  id="tele"   placeholder="Phone Number" />
           <input type="text" name="title"   id="title" placeholder="Lead Title" />
           <input type="text" name="company"  id="company"  placeholder="Company" />
           <button type="submit" name="submit" value="submit" id="submitBtn">Add!</button>
          <!-- <a href="javascript:%20check_empty()" id="submit">Send</a> -->

       </form>
   </div>

</div><!--/ container-->




<script type="text/javascript" src="js/app.js"></script>