先に解決したコード全体を載せます。 **インデントのズレ等は質問者のままとします。** **JavaScriptはHTML内に埋め込む形にしています。** あくまで、ねらい通りにレイアウトすることを目標としたので、他の必要なコードが消えているかもしれません。参考として利用してください。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel ="stylesheet" href="css/style.css"> <title>Todoリスト</title> </head> <body> <h1>Todoリスト</h1> <p> <input type="radio" name="status" value="1" checked="checked">全て <input type="radio" name="status" value="2">作業中 <input type="radio" name="status" value="3">完了 </p> <p></p> <table> <thead> <th>ID</th> <th>コメント</th> <th>状態</th> <th>削除ボタン</th> </thead> <tbody class ="addTask-target"></tbody> </table> <h2>新規タスクの追加</h2> <input class="addTask-value" type="text" /> <button class="addTask-trigger" type="button">追加</button> <script src="js/main.js"></script> </body> <script> document.addEventListener('DOMContentLoaded', function() { // 必要なDOM要素を取得。 const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0]; const addTaskTarget = document.getElementsByClassName('addTask-target')[0]; const addTaskValue = document.getElementsByClassName('addTask-value')[0]; //ID用のインデックスを定義 let nextId = 0; const addTask = (task,id) => { // 表のタグを生成する const tableItem = document.createElement('tr'); const addButtonTd = document.createElement('td'); const addButton = document.createElement('button'); const removeButtonTd = document.createElement('td'); const removeButton = document.createElement('button'); // それぞれ作業中、削除という言葉をボタンに入れる addButton.innerText = '作業中'; removeButton.innerText = '削除'; //ボタンを押したら以下の作業をする removeButton.addEventListener('click', () => removeTask(removeButton)); // IDを表示するspan要素を作成して tableItem に追加 const idSpan = document.createElement('span'); idSpan.innerText = id; const idSpanTd = document.createElement('td'); idSpanTd.append(idSpan); const taskSpan = document.createElement('span'); const taskSpanTd = document.createElement('td'); taskSpan.innerText = task; taskSpanTd.append(taskSpan); addButtonTd.append(addButton); removeButtonTd.append(removeButton); tableItem.append(idSpanTd); tableItem.append(taskSpanTd); tableItem.append(addButtonTd); tableItem.append(removeButtonTd); //入力タスクを表示 addTaskTarget.appendChild(tableItem); }; // 追加ボタンに対して、タスク登録イベントを設定 addTaskTrigger.addEventListener('click', event => { const task = addTaskValue.value; addTask(task,nextId ++); addTaskValue.value = ''; }); }); </script> </html> # 解説 あなたが書いたコードによってどのようなHTMLが生成されているか確認してみましょう。 下記のような感じになっていました。 ## おかしな点を探る <tbody class="addTask-target"> <tr> </tr> <thead><span>0</span>aaa<button>作業中</button><button>削除</button></thead><thead><span>1</span>bbb<button>作業中</button><button>削除</button></thead></tbody> ## またもともとのHTMLもおかしいです ### HTMLのおかしいところ <tr>ID コメント 状態</tr> Gifでは4つのデータを表示したいようですが、これでは3つのデータを表示したいように受け取れます。 しかも`<tr>`の中に直接文字を打ち込んでいるのでこれでは何も機能しません。 ## JavaScriptのおかしいところ HTML側と似たようなミスをしていますが、いきなりすべてのデータを `thead` におしこみすぎています。`td` をちゃんと作って一つずつHTMLを構築していくように修正しました。