8.5 動的な要素の追加と削除
JavaScript を使って、ページに新しい要素を追加したり、既存の要素を削除したりする方法を学びます。
8.5.1 createElement, appendChild, removeChild
createElement
新しい HTML 要素を作成します。
appendChild
作成した要素を、親要素の子として追加します。
removeChild
指定した子要素を削除します。
// 新しい要素を作成
const newDiv = document.createElement("div");
newDiv.textContent = "新しい要素です";
// body に追加
document.body.appendChild(newDiv);
// 削除
document.body.removeChild(newDiv);
8.5.2 動的リストを作成するプログラム
ソースフォルダ：public/ch08
ファイル名：dynamic-list.js
➢ dynamic-list.html
前の項で作った ch08/event-handler.html をコピーし、ch08 にペーストしてください。その際に、ファイル名を dynamic-list.html に変更します。ファイル内の event-handler.html や event-handler.jsの記述も、dynamic-list.html や dynamic-list.js に修正します。さらに、ファイル内の記述を以下のように修正します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの練習: dynamic-list.jsを実行中</title>
<script src="dynamic-list.js" defer></script>
</head>
<body>
<h1>TODOリスト</h1>
<input type="text" id="todoInput" placeholder="タスクを入力">
<button id="addBtn">追加</button>
<ul id="todoList"></ul>
</body>
</html>
➢ dynamic-list.js
// dynamic-list.js
document.addEventListener("DOMContentLoaded", () => {
// 要素を取得
const input = document.querySelector("#todoInput");
const addBtn = document.querySelector("#addBtn");
const todoList = document.querySelector("#todoList");
// タスクを追加する関数
function addTodo() {
const task = input.value;
// 入力が空の場合は処理しない
if (task === "") {
alert("タスクを入力してください");
return;
}
// 新しい li 要素を作成
const li = document.createElement("li");
li.textContent = task;
// 削除ボタンを作成
const deleteBtn = document.createElement("button");
deleteBtn.textContent = "削除";
// 削除ボタンがクリックされたときの処理
deleteBtn.addEventListener("click", function() {
todoList.removeChild(li);
});
// li に削除ボタンを追加
li.appendChild(deleteBtn);
// ul に li を追加
todoList.appendChild(li);
// 入力フィールドをクリア
input.value = "";
}
// 追加ボタンのクリックイベント
addBtn.addEventListener("click", addTodo);
// Enter キーでも追加できるようにする
input.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
addTodo();
}
});
}); // DOMContentLoaded ここまで
実行結果
入力フィールドにタスクを入力して「追加」ボタンをクリックすると、リストに新しいタスクが追加されます。各タスクの横には「削除」ボタンがあり、クリックするとそのタスクが削除されます。
解説
4 行目から 6 行目で、必要な要素を取得しています。
4: const input = document.querySelector("#todoInput");
5: const addBtn = document.querySelector("#addBtn");
6: const todoList = document.querySelector("#todoList");
9 行目から 39 行目で、タスクを追加する addTodo 関数を定義しています。
19 行目と 20 行目では、新しい li 要素を作成し、入力されたタスクをテキストとして設定しています。
19: const li = document.createElement("li");
20: li.textContent = task;
23 行目と 24 行目では、削除用のボタン要素を作成しています。
23: const deleteBtn = document.createElement("button");
24: deleteBtn.textContent = "削除";
27 行目から 29 行目では、削除ボタンがクリックされたときに、その li 要素を todoList から削除する処理を定義しています。
27: deleteBtn.addEventListener("click", function() {
28: todoList.removeChild(li);
29: });
32 行目では、作成した削除ボタンを li 要素の子として追加しています。
32: li.appendChild(deleteBtn);
35 行目では、完成した li 要素を ul（todoList）の子として追加しています。
35: todoList.appendChild(li);
38 行目では、タスクを追加した後、入力フィールドを空にしています。
38: input.value = "";
42 行目と 45 行目から 49 行目では、ボタンクリックと Enter キーの両方で addTodo 関数が実行されるようにしています。
42: addBtn.addEventListener("click", addTodo);
45: input.addEventListener("keydown", function(event) {
46: if (event.key === "Enter") {
47: addTodo();
48: }
49: });