HTML要素を作成・追加・削除しよう | JavaScript基礎

JavaScriptからDOM要素を作ると、入力内容や取得したデータに応じて画面を更新できます。

今回は、フォームに入力した学習タスクを一覧へ追加し、不要になったタスクを削除します。文字列からHTMLを作るのではなく、要素を一つずつ安全に組み立てる手順を身に付けます。

今回使用するファイル構成

javascript-practice/
├── index.html
└── js/
    └── script.js

動的なDOM操作の基本

要素を作成して追加する

<ul id="task-list"></ul>

const taskList = document.querySelector('#task-list');
const item = document.createElement('li');

item.textContent = 'JavaScriptを復習する';
item.classList.add('task-item');
taskList.append(item);

createElement()で要素を作り、内容やクラスを設定してからappend()で追加します。

削除ボタンを含める

function createTaskItem(taskName) {
  const item = document.createElement('li');
  const text = document.createElement('span');
  const removeButton = document.createElement('button');

  text.textContent = taskName;
  removeButton.type = 'button';
  removeButton.textContent = '削除';
  removeButton.addEventListener('click', () => item.remove());

  item.append(text, removeButton);
  return item;
}

taskList.append(createTaskItem('DOM操作を練習する'));

remove()は対象要素をDOMから削除します。作成処理を関数にすると異なるデータで再利用できます。

innerHTMLとの使い分け

利用者が入力した値をinnerHTMLへ直接入れると、意図しないHTMLが実行される危険があります。文章として表示する値にはtextContentを使い、要素はcreateElement()で組み立てる方法を基本にします。

入力したタスクを追加する

フォームを用意する

index.htmlへ次の内容を記述します。

<h1>学習タスク</h1>

<form id="task-form">
  <label for="task-name">新しいタスク</label>
  <input id="task-name" type="text">
  <button type="submit">追加する</button>
</form>

<p id="task-error" aria-live="polite"></p>
<ul id="task-list"></ul>

追加処理を完成させる

const form = document.querySelector('#task-form');
const taskNameInput = document.querySelector('#task-name');
const taskError = document.querySelector('#task-error');
const taskList = document.querySelector('#task-list');

function createTaskItem(taskName) {
  const item = document.createElement('li');
  const text = document.createElement('span');
  const removeButton = document.createElement('button');

  text.textContent = taskName;
  removeButton.type = 'button';
  removeButton.textContent = '削除';
  removeButton.setAttribute('aria-label', `${taskName}を削除`);

  removeButton.addEventListener('click', () => {
    item.remove();
  });

  item.append(text, removeButton);
  return item;
}

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const taskName = taskNameInput.value.trim();

  if (taskName === '') {
    taskError.textContent = 'タスクを入力してください。';
    taskNameInput.focus();
    return;
  }

  taskError.textContent = '';
  taskList.append(createTaskItem(taskName));
  form.reset();
  taskNameInput.focus();
});

関数はDOMへ直接追加せず、完成したli要素を返します。どこへ追加するかは呼び出し側が決めるため、同じ関数を別の一覧でも再利用しやすくなります。

form.reset()はフォーム部品を初期状態へ戻します。その後にfocus()を呼び、続けて次のタスクを入力できるようにしています。

DOMへ追加する位置を選ぶ

append()は末尾、prepend()は先頭へ追加します。

taskList.prepend(createTaskItem(taskName));

既存要素の前後へ追加するときはbefore()とafter()も使えます。どのメソッドを使うかは、一覧の並び順と画面の目的で決めます。

動作確認とエラー調査

文字を入力して追加できる
空文字と空白だけでは追加できない
複数件を追加してもそれぞれ削除できる
削除後も入力欄へ戻って操作できる

追加されない場合は、Consoleのエラー、HTMLのid、scriptの読み込み位置を確認します。削除ボタンがフォーム内にある場合、type="button"がないと送信ボタンとして動く点にも注意してください。

まとめ

DOM要素は作成、設定、追加の順に組み立てます。削除処理も要素の近くで登録できます。次の記事では、配列のデータから複数要素を生成します。