js　追加ボタンを押すと一行ずつtrを追加したいです。

実現したいこと

いつもお世話になっております。
js勉強中です。
現在jsでテーブルを作成して、追加ボタンを押す毎に名前とニックネームが一行ずつテーブル表示されるようにしようとしているのですが、1人分しか表示できません。
追加ボタンを押すと一行ずつ<div id="result">内に追加されるようにしたいのですが、どなたかご教授頂けませんでしょうか。
お忙しいとは思いますが、宜しくお願い致します。

HTML

<body>
        <div class="base container">
          <div class="row">
            <h1>アカウント登録</h1>
          </div>
          <div class="row">
            <div class="card" id="card">
              <div class="card-block">
                <form id="form-area" class="form-inline" method="post">
                    <div class="form-group">
                        <div class="input-group">
                          <input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
                        </div>
                    </div>

                    <div class="form-group">
                      <input id="tuikaBtn" type="button" name="touroku" value="追加">
                    </div>

                </form>
                
                <div id="result"></div>
                
              </div>
            </div>
          </div>  
        </div>
      </div>
      <div id="overLay">
      </div>

Javascript

let
1          let tuikaTimes = 0;
2          let result = document.getElementById('result');
3          tuikaBtn.addEventListener('click', function () {
4            let namae = document.getElementById("namae");
5            let nickname = document.getElementById("nickname");
6
7            if( namae.value===""||nickname.value==="") {
8                return false;
9            }
10            if(!window.confirm(namae.value + 'さん' + nickname.value + 'を登録します。よろしいですか？')) {
11              return false;
12            }
13//テーブルを作成
14            if(!result.hasChildNodes()) {
15                  let table = document.createElement("table");
16                  let tbody = document.createElement("tbody");
17                  let trow = document.createElement("tr");
18                  let thead = document.createElement("thead");
19                  let tname = document.createElement("th");
20                  let tnickname = document.createElement("th");
21                  let thdelbtn = document.createElement("th");
22                  tname.textContent = namae.value;
23                  tnickname.textContent = nickname.value;
24                  thdelbtn.textContent = "削除";
25                  result.appendChild(table);
26                  table.appendChild(thead);
27                  table.appendChild(tbody);
28                  thead.appendChild(trow);
29                  trow.appendChild(tname);
30                  trow.appendChild(tnickname);
31                  trow.appendChild(thdelbtn);
32
33                }
34//tbodyにtrを追加する
35                if(result.hasChildNodes()) {
36                  let table = document.createElement("table");
37                  let tbody = document.createElement("tbody");
38                  let thead = document.createElement("thead");
39                  let newRow = tbody.insertRow("tr");                             
40                  let tname2 = document.createElement("th");
41                  let tnickname2 = document.createElement("th");
42                  let thdelbtn2 = document.createElement("th");
43                  tname2.textContent = namae.value;
44                  tnickname2.textContent = nickname.value;
45                  thdelbtn2.textContent = "削除";
46                  table.appendChild(thead);
47                  thead.appendChild(newRow);
48                  tbody.appendChild(newRow);
49                  newRow.appendChild(tname2);
50                  newRow.appendChild(tnickname2);
51                  newRow.appendChild(thdelbtn2);
52                }                  
53                
54                alert(namae.value + 'さん' + nickname.value + 'にて登録しました。');
55
56                tuikaTimes++;
57                
58            if(tuikaTimes >= 3) {
59                let hyoji = document.getElementById("tuikaBtn");
60                hyoji.style.visibility="hidden";
61                return false;
62                }    
63          });
64

行動規範の内容に同意します

回答1件

ベストアンサー

ざっとこんなかんじ

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  tuikaBtn.addEventListener('click',()=>{
4    let tbl=result.querySelector('table');
5    if(!tbl){
6      tbl=document.createElement('table');
7      result.appendChild(tbl);
8    }
9    const v1=namae.value;
10    const v2=nickname.value;
11    if(v1 && v2){
12      const tr=[v1,v2].reduce((x,y)=>(x.appendChild(Object.assign(document.createElement('td'),{textContent:y})),x),document.createElement('tr'));
13      tr.appendChild(Object.assign(document.createElement('input'),{type:'button',value:'削除',className:'del'}));
14      tbl.appendChild(tr);
15      namae.value='';
16      nickname.value='';
17    }
18  });
19});
20document.addEventListener('click',e=>{
21  if(e.target.matches('.del')){
22    e.target.closest('tr').remove();
23  }
24});
25</script>
26<form id="form-area" class="form-inline" method="post">
27<div>
28<input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
29</div>
30<div>
31<input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
32</div>
33<input id="tuikaBtn" type="button" name="touroku" value="追加">
34</form>
35<div id="result"></div>