【javascript】シンプルなtableの動的行追加・削除（ボタンクリックで行追加・削除） - Qiita

<!--ボタン配置--> <div> <button onclick="add()">行追加</button> <button onclick="del()">行削除</button> </div> <!--table作成とヘッダーだけ先に--> <table id="tbl" border="1" style="border-collapse:collapse;"> <tr> <th>名前</th> <th>趣味</th> <th>好きなもの</th> </tr> </table> //繰り返し使うtableだけ先に定数に格納 const tbl = document.getElementById("tbl"); //行追加 function add(){ //空の行要素を先に作成tr let tr = document.createElement("tr"); //以下、繰り返し処理