- Day 37：要素の追加（前半）
- 要素の追加の全体像をイメージする
- createElement()で“新しい要素の赤ちゃん”を作る
- append()とappendChild()で“親子関係”を作る
- 実践：リスト追加機能を作る
- append()とappendChild()の違いを軽く押さえておく
- セキュリティ・安全性の観点からの補足
- Day 37 前半 練習用テンプレート
- Day 37 前半のまとめ
- Day 37：要素の追加（後半）
- 要素追加を“1つの機能”として設計する
- createElementで“部品を作る関数”を用意する
- appendChildで“リストに追加する処理”を関数にする
- 実践：関数を使ってリスト追加機能を整理する
- appendとappendChildを“意図で使い分ける”
- 少し発展：削除ボタン付きのリスト項目を作る
- セキュリティ・安全性の観点からの補足
- Day 37 後半 練習用テンプレート
- Day 37 後半のまとめ
Day 37：要素の追加（前半）
「createElementで“新しいタグ”を作り、appendでページに生やす」
Day 37前半では、DOM操作の中でもとてもワクワクする 「要素の追加」 を扱います。 これまでの学習では「既にある要素を取得して操作する」ことが中心でしたが、 ここからは 「新しく要素を作って、ページに追加する」 ことができるようになります。
キーワードは次の3つです。
createElement()append()appendChild()
実践テーマは 「リスト追加機能」。 ボタンを押すと、リストに項目が増えていく仕組みを、ステップバイステップで解説していきます。
要素の追加の全体像をイメージする
「HTMLを書き足す」のではなく「DOMに要素を生やす」
ふだんHTMLを書くときは、
<li>りんご</li>
<li>みかん</li>
のように、あらかじめタグを記述します。
しかし、JavaScriptで要素を追加するときは、
「JavaScriptのコードの中で、新しい要素を作り、DOMツリーに追加する」
という流れになります。
このときに使うのが、
document.createElement('タグ名')親要素.append(子要素)親要素.appendChild(子要素)
です。
createElement()で“新しい要素の赤ちゃん”を作る
createElement()とは何か
createElement() は、
「指定したタグ名の要素を、新しく1つ作る」
ためのメソッドです。
基本形は次の通りです。
const newElement = document.createElement('タグ名');
例えば、リスト項目（<li>）を作りたいなら、
const liElement = document.createElement('li');
と書きます。
この時点では、まだページには表示されません。 「DOMの世界に、まだ親のいない要素が1つ生まれた状態」 だとイメージすると分かりやすいです。
作った要素に中身を入れる
新しく作った要素には、テキストや属性を設定できます。
const liElement = document.createElement('li'); // <li>要素を作る
liElement.textContent = 'りんご'; // 中身のテキストを設定する
これで、 「中身が『りんご』の<li>要素」 が準備できました。
あとは、この要素を「どこにぶら下げるか」を決めて追加していきます。
append()とappendChild()で“親子関係”を作る
親要素に子要素を追加するという考え方
DOMは「木構造（ツリー）」になっていて、
<ul>が「親」- その中の
<li>が「子」
というように、要素同士が親子関係を持っています。
新しく作った要素をページに表示するには、
「どの親要素の子として追加するか」
を決めて、 その親要素に対して append() や appendChild() を呼び出します。
appendChild()の基本
appendChild() は、
「指定した子要素を、親要素の一番最後の子として追加する」
メソッドです。
基本形は次の通りです。
親要素.appendChild(子要素);
例えば、<ul> に <li> を追加するなら、
const ulElement = document.getElementById('myList'); // 親の<ul>を取得
const liElement = document.createElement('li'); // 子の<li>を作る
liElement.textContent = 'りんご'; // 中身を設定
ulElement.appendChild(liElement); // 親に子を追加
これで、ページ上の <ul> の末尾に、新しい <li> が1つ追加されます。
append()の基本
append() は、appendChild() より少し柔軟なメソッドで、
「子要素やテキストを、親要素の末尾に追加できる」
という特徴があります。
基本形は次の通りです。
親要素.append(子要素);
親要素.append('テキスト');
例えば、
ulElement.append(liElement); // 要素を追加
ulElement.append('テキスト'); // テキストノードを追加
といった使い方ができます。
初心者の方にとっては、
- 「要素を追加する」 →
appendChild() - 「要素もテキストもまとめて追加したい」 →
append()
というイメージで覚えておくと良いです。
実践：リスト追加機能を作る
目標イメージ
- 最初は空のリスト、または少しだけ項目がある。
- テキスト入力欄に「りんご」「みかん」などを入力する。
- 「追加」ボタンを押すと、その文字列を持つ
<li>がリストに追加される。
これを、createElement()＋appendChild() を使って実装していきます。
HTML構造を用意する
まずは、リストと入力欄、ボタンを用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 37 前半：リスト追加機能</title>
</head>
<body>
<h1>リスト追加機能</h1>
<!-- ▼ リスト（最初は空でもOK） -->
<ul id="itemList">
<!-- ここに<li>が追加されていきます -->
</ul>
<!-- ▼ 項目名入力フォーム -->
<form id="itemForm">
<label for="itemInput">項目名：</label>
<input type="text" id="itemInput" placeholder="追加したい項目名を入力してください">
<button type="submit">追加</button>
</form>
<!-- ▼ メッセージ表示エリア -->
<p id="message"></p>
<script>
// ここにJavaScriptを書いていきます
</script>
</body>
</html>
JavaScriptで「追加の流れ」を作る
次に、JavaScriptで
- フォーム送信を受け取る
- 入力値を取り出す
<li>要素を作る- リストに追加する
という流れを作ります。
// ▼ 親の<ul>要素を取得します
const itemListElement = document.getElementById('itemList');
// ▼ フォーム要素を取得します
const itemFormElement = document.getElementById('itemForm');
// ▼ 入力欄の<input>要素を取得します
const itemInputElement = document.getElementById('itemInput');
// ▼ メッセージ表示用の<p>要素を取得します
const messageElement = document.getElementById('message');
// ▼ フォームが送信されたときの処理
itemFormElement.addEventListener('submit', function (event) {
// 標準の送信動作（ページリロードなど）を止めます
event.preventDefault();
// 入力欄に現在入っている値を取得します
const enteredItem = itemInputElement.value;
// 前後の空白を取り除いた文字列を作ります
const trimmedItem = enteredItem.trim();
// 空チェック
if (trimmedItem === '') {
messageElement.textContent = '項目名が空です。文字を入力してください。';
return; // ここで処理を終了します
}
// ▼ 新しい<li>要素を作ります
const liElement = document.createElement('li');
// ▼ li要素の中身のテキストを設定します
liElement.textContent = trimmedItem;
// ▼ 親の<ul>に<li>を追加します
itemListElement.appendChild(liElement);
// ▼ メッセージを更新します
messageElement.textContent = `「${trimmedItem}」をリストに追加しました。`;
// ▼ 入力欄をリセットします
itemInputElement.value = '';
});
完成コード（コメント付き）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 37 前半：リスト追加機能</title>
</head>
<body>
<h1>リスト追加機能</h1>
<!-- ▼ リスト -->
<ul id="itemList">
<!-- ここに<li>が追加されていきます -->
</ul>
<!-- ▼ 項目名入力フォーム -->
<form id="itemForm">
<label for="itemInput">項目名：</label>
<input type="text" id="itemInput" placeholder="追加したい項目名を入力してください">
<button type="submit">追加</button>
</form>
<!-- ▼ メッセージ表示エリア -->
<p id="message"></p>
<script>
// ▼ 親の<ul>要素を取得します
const itemListElement = document.getElementById('itemList');
// ▼ フォーム要素を取得します
const itemFormElement = document.getElementById('itemForm');
// ▼ 入力欄の<input>要素を取得します
const itemInputElement = document.getElementById('itemInput');
// ▼ メッセージ表示用の<p>要素を取得します
const messageElement = document.getElementById('message');
// ▼ フォームが送信されたときの処理
itemFormElement.addEventListener('submit', function (event) {
// 標準の送信動作（ページリロードなど）を止めます
event.preventDefault();
// 入力欄に現在入っている値を取得します
const enteredItem = itemInputElement.value;
// 前後の空白を取り除いた文字列を作ります
const trimmedItem = enteredItem.trim();
// 空チェック
if (trimmedItem === '') {
messageElement.textContent = '項目名が空です。文字を入力してください。';
return; // ここで処理を終了します
}
// ▼ 新しい<li>要素を作ります
const liElement = document.createElement('li');
// ▼ li要素の中身のテキストを設定します
liElement.textContent = trimmedItem;
// ▼ 親の<ul>に<li>を追加します
itemListElement.appendChild(liElement);
// ▼ メッセージを更新します
messageElement.textContent = `「${trimmedItem}」をリストに追加しました。`;
// ▼ 入力欄をリセットします
itemInputElement.value = '';
});
</script>
</body>
</html>
append()とappendChild()の違いを軽く押さえておく
appendChild()の特徴
- 引数に「1つのノード（要素）」しか取れません。
- テキストを直接渡すことはできません（テキストノードを作れば可能ですが、少し手間）。
parent.appendChild(childElement); // OK
parent.appendChild('テキスト'); // NG（エラー）
append()の特徴
- 要素もテキストも渡せます。
- 複数の引数を渡すこともできます。
parent.append(childElement); // OK
parent.append('テキスト'); // OK
parent.append(childElement, 'テキスト'); // OK
初心者の段階では、
「まずはappendChildで“要素を追加する感覚”を身につける」
→ 慣れてきたら append() も使ってみる、 という順番で覚えていくとスムーズです。
セキュリティ・安全性の観点からの補足
リスト追加機能では、ユーザーが入力した文字列をそのまま画面に表示します。 このとき、
textContentを使っているinnerHTMLを使っていない
という点が重要です。
liElement.textContent = trimmedItem;
とすることで、
- 入力された文字列がHTMLとして解釈されない
<script>などが入力されても、そのまま「文字」として表示される
ため、XSS（クロスサイトスクリプティング）のような攻撃を防ぐ一歩になります。
フォーム＋DOM操作の組み合わせは、 セキュリティ的に重要な領域なので、
「ユーザー入力を画面に出すときは、基本的にtextContentを使う」
という習慣を持っておくと安全です。
Day 37 前半 練習用テンプレート
最後に、今日の内容をまとめて練習できるテンプレートを紹介します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 37 前半：要素の追加 練習テンプレート</title>
</head>
<body>
<h1>Day 37 前半：要素の追加 練習</h1>
<section>
<h2>リスト追加機能</h2>
<ul id="itemList">
<!-- ここに<li>が追加されていきます -->
</ul>
<form id="itemForm">
<label for="itemInput">項目名：</label>
<input type="text" id="itemInput" placeholder="追加したい項目名を入力してください">
<button type="submit">追加</button>
</form>
<p id="message"></p>
</section>
<script>
console.log('--- 要素の追加 練習開始 ---');
const itemListElement = document.getElementById('itemList');
const itemFormElement = document.getElementById('itemForm');
const itemInputElement = document.getElementById('itemInput');
const messageElement = document.getElementById('message');
itemFormElement.addEventListener('submit', function (event) {
event.preventDefault();
const enteredItem = itemInputElement.value;
const trimmedItem = enteredItem.trim();
messageElement.textContent = '';
if (trimmedItem === '') {
messageElement.textContent = '項目名が空です。文字を入力してください。';
return;
}
const liElement = document.createElement('li');
liElement.textContent = trimmedItem;
itemListElement.appendChild(liElement);
messageElement.textContent = `「${trimmedItem}」をリストに追加しました。`;
itemInputElement.value = '';
console.log('リストに追加:', trimmedItem);
});
console.log('--- 要素の追加 練習テンプレートの準備が完了しました ---');
</script>
</body>
</html>
Day 37 前半のまとめ
Day 37前半では、
createElement()で「新しい要素の赤ちゃん」を作り、 その中身（textContentなど）を設定する流れを学んだこと。appendChild()やappend()を使って、 親要素に子要素を追加し、DOMツリーに参加させる感覚を身につけたこと。- フォーム入力＋要素追加を組み合わせて、 「リスト追加機能」という実用的なミニ機能を作ったこと。
- ユーザー入力を画面に表示するときに、
textContentを使うことで安全性を高めるという視点を持ったこと。
を整理しました。
この「要素を作って追加する」スキルは、 TODOリスト、チャット画面、コメント欄、カード一覧など、 動的なUIを作るうえで欠かせない基礎になります。
今日のコードを何度か書き直しながら、
「どの親に、どんな子を、どんなタイミングで追加するか」
を意識して練習していくことで、 DOMを“自分の手で育てていく”感覚が、どんどん身についていきます。
Day 37：要素の追加（後半）
「createElement＋appendで“使えるリスト追加機能”に育てていく」
Day 37後半では、前半で学んだ
createElement()append()appendChild()
を、もう一歩踏み込んで「実際に使えるリスト追加機能」に育てていきます。 単に「追加できる」だけでなく、
- コードの見通しをよくする
- 再利用しやすい形にする
- セキュリティと安全性を意識する
という視点で、要素追加を設計していきます。
要素追加を“1つの機能”として設計する
ただ書くコードから、“機能としてまとめる”コードへ
前半では、
- 入力値を取得する
<li>を作る- リストに追加する
という流れを、1つのイベント処理の中に書きました。
後半では、これを少し整理して、
- 「リスト項目を作る処理」
- 「リストに追加する処理」
を関数として分けて書くことで、 コードの見通しをよくしていきます。
createElementで“部品を作る関数”を用意する
リスト項目を作る関数を定義する
まず、「新しい <li> 要素を作る処理」を関数にまとめます。
function createListItem(text) {
// 新しい<li>要素を作ります
const liElement = document.createElement('li');
// 中身のテキストを設定します
liElement.textContent = text;
// 作った<li>要素を返します
return liElement;
}
この関数は、
「渡されたテキストを中身に持つ<li>要素を1つ作って返す」
という役割を持ちます。
こうしておくと、 イベント処理の中では
const liElement = createListItem(trimmedItem);
itemListElement.appendChild(liElement);
と書くだけで済み、 「何をしているか」が読みやすくなります。
appendChildで“リストに追加する処理”を関数にする
追加処理も関数にまとめる
次に、「リストに項目を追加する処理」も関数にしてみます。
function addItemToList(listElement, text) {
// テキストが空なら何もしません
const trimmedText = text.trim();
if (trimmedText === '') {
return;
}
// 新しい<li>要素を作ります
const liElement = createListItem(trimmedText);
// 親の<ul>に<li>を追加します
listElement.appendChild(liElement);
}
この関数は、
「指定されたリスト（
<ul>）に、指定されたテキストを持つ<li>を追加する」
という役割を持ちます。
イベント処理側では、
addItemToList(itemListElement, enteredItem);
と書くだけで、「リストに追加する」という意図がはっきり伝わります。
実践：関数を使ってリスト追加機能を整理する
完成コード（関数で整理したバージョン）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 37 後半：関数で整理したリスト追加機能</title>
</head>
<body>
<h1>リスト追加機能（関数で整理したバージョン）</h1>
<!-- ▼ リスト -->
<ul id="itemList">
<!-- ここに<li>が追加されていきます -->
</ul>
<!-- ▼ 項目名入力フォーム -->
<form id="itemForm">
<label for="itemInput">項目名：</label>
<input type="text" id="itemInput" placeholder="追加したい項目名を入力してください">
<button type="submit">追加</button>
</form>
<!-- ▼ メッセージ表示エリア -->
<p id="message"></p>
<script>
// ▼ 親の<ul>要素を取得します
const itemListElement = document.getElementById('itemList');
// ▼ フォーム要素を取得します
const itemFormElement = document.getElementById('itemForm');
// ▼ 入力欄の<input>要素を取得します
const itemInputElement = document.getElementById('itemInput');
// ▼ メッセージ表示用の<p>要素を取得します
const messageElement = document.getElementById('message');
// ▼ 新しい<li>要素を作る関数
function createListItem(text) {
const liElement = document.createElement('li');
liElement.textContent = text; // textContentなので安全にテキストとして扱われます
return liElement;
}
// ▼ リストに項目を追加する関数
function addItemToList(listElement, text) {
const trimmedText = text.trim();
if (trimmedText === '') {
messageElement.textContent = '項目名が空です。文字を入力してください。';
return;
}
const liElement = createListItem(trimmedText);
listElement.appendChild(liElement);
messageElement.textContent = `「${trimmedText}」をリストに追加しました。`;
}
// ▼ フォームが送信されたときの処理
itemFormElement.addEventListener('submit', function (event) {
event.preventDefault(); // 標準の送信動作を止めます
const enteredItem = itemInputElement.value;
// メッセージを一度クリアします
messageElement.textContent = '';
// リストに項目を追加します
addItemToList(itemListElement, enteredItem);
// 入力欄をリセットします
itemInputElement.value = '';
});
</script>
</body>
</html>
深掘りポイント
createListItemとaddItemToListに分けることで、 「要素を作る処理」と「リストに追加する処理」が明確に分離されます。- イベント処理の中身が短くなり、 「フォーム送信 → リスト追加 → 入力欄リセット」という流れが読みやすくなります。
こうした「関数に分ける」というテクニックは、 コードが長くなってきたときに、 バグを減らし、保守性を高めるうえで非常に重要です。
appendとappendChildを“意図で使い分ける”
appendを使ったバリエーション
先ほどは appendChild() を使いましたが、 同じことを append() でも書けます。
function addItemToListWithAppend(listElement, text) {
const trimmedText = text.trim();
if (trimmedText === '') {
messageElement.textContent = '項目名が空です。文字を入力してください。';
return;
}
const liElement = document.createElement('li');
liElement.textContent = trimmedText;
// appendを使って<li>を追加します
listElement.append(liElement);
messageElement.textContent = `「${trimmedText}」をリストに追加しました。（append版）`;
}
append() は、
- 要素もテキストも追加できる
- 複数の引数も渡せる
という柔軟さがあります。
初心者の方にとっては、
- 「DOMノード（要素）を追加する」 →
appendChild() - 「テキストも含めて柔軟に追加したい」 →
append()
という意図で使い分けると、 頭の中が整理しやすくなります。
少し発展：削除ボタン付きのリスト項目を作る
「追加したものを消せる」ことで、機能として完結する
リスト追加機能をもう一歩進めて、
「追加した項目を削除できる」
ようにすると、 TODOリストや買い物リストなどに近づいていきます。
ここでは、
<li>の中にテキストと削除ボタンを入れる- 削除ボタンをクリックしたら、その
<li>を削除する
というミニ機能を作ってみます。
削除ボタン付きの<li>を作る関数
function createRemovableListItem(text) {
const liElement = document.createElement('li');
// テキスト部分の<span>を作ります
const textSpan = document.createElement('span');
textSpan.textContent = text;
// 削除ボタンを作ります
const deleteButton = document.createElement('button');
deleteButton.textContent = '削除';
// 削除ボタンがクリックされたときの処理
deleteButton.addEventListener('click', function () {
// 親の<li>をリストから削除します
liElement.remove();
});
// liの中にテキストとボタンを追加します
liElement.append(textSpan, deleteButton);
return liElement;
}
ここでは、
<li>の中に<span>と<button>を追加- ボタンに
clickイベントを付けて、liElement.remove()で削除
という流れになっています。
削除機能付きリスト追加の完成コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 37 後半：削除機能付きリスト追加</title>
</head>
<body>
<h1>削除機能付きリスト追加</h1>
<ul id="itemList">
<!-- ここに<li>が追加されていきます -->
</ul>
<form id="itemForm">
<label for="itemInput">項目名：</label>
<input type="text" id="itemInput" placeholder="追加したい項目名を入力してください">
<button type="submit">追加</button>
</form>
<p id="message"></p>
<script>
const itemListElement = document.getElementById('itemList');
const itemFormElement = document.getElementById('itemForm');
const itemInputElement = document.getElementById('itemInput');
const messageElement = document.getElementById('message');
// ▼ 削除ボタン付き<li>を作る関数
function createRemovableListItem(text) {
const liElement = document.createElement('li');
const textSpan = document.createElement('span');
textSpan.textContent = text;
const deleteButton = document.createElement('button');
deleteButton.textContent = '削除';
// 削除ボタンがクリックされたときの処理
deleteButton.addEventListener('click', function () {
liElement.remove(); // この<li>をリストから削除します
});
// liの中にテキストとボタンを追加します
liElement.append(textSpan, deleteButton);
return liElement;
}
// ▼ リストに項目を追加する関数
function addRemovableItemToList(listElement, text) {
const trimmedText = text.trim();
if (trimmedText === '') {
messageElement.textContent = '項目名が空です。文字を入力してください。';
return;
}
const liElement = createRemovableListItem(trimmedText);
listElement.appendChild(liElement);
messageElement.textContent = `「${trimmedText}」をリストに追加しました。`;
}
itemFormElement.addEventListener('submit', function (event) {
event.preventDefault();
const enteredItem = itemInputElement.value;
messageElement.textContent = '';
addRemovableItemToList(itemListElement, enteredItem);
itemInputElement.value = '';
});
</script>
</body>
</html>
深掘りポイント
createRemovableListItemの中で、 「1つの<li>の中に完結した機能（表示＋削除）」を作っていること。- 削除ボタンのイベント処理が、 自分自身の親要素（
liElement）を削除していること。
こうした「1つの要素に機能を閉じ込める」設計は、 コンポーネント的な考え方の入り口になります。
セキュリティ・安全性の観点からの補足
リスト追加機能では、ユーザー入力を画面に表示します。 ここで意識しておきたいポイントは次の通りです。
- 入力値を表示するときは、
textContentを使うinnerHTMLを使うと、入力された文字列がHTMLとして解釈されてしまい、<script>などが実行される危険があります。
- 入力値は必ず
trim()などで前処理し、 空文字やスペースだけの入力を防ぐ。
今回のコードでは、すべて
textSpan.textContent = text;
のように textContent を使っているため、 入力された文字列が安全に「ただのテキスト」として扱われます。
Day 37 後半 練習用テンプレート
最後に、今日の内容をまとめて練習できるテンプレートを紹介します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 37 後半：要素の追加 総合練習テンプレート</title>
</head>
<body>
<h1>Day 37 後半：要素の追加 総合練習</h1>
<section>
<h2>削除機能付きリスト追加</h2>
<ul id="itemList">
<!-- ここに<li>が追加されていきます -->
</ul>
<form id="itemForm">
<label for="itemInput">項目名：</label>
<input type="text" id="itemInput" placeholder="追加したい項目名を入力してください">
<button type="submit">追加</button>
</form>
<p id="message"></p>
</section>
<script>
console.log('--- 要素の追加 総合練習開始 ---');
const itemListElement = document.getElementById('itemList');
const itemFormElement = document.getElementById('itemForm');
const itemInputElement = document.getElementById('itemInput');
const messageElement = document.getElementById('message');
function createRemovableListItem(text) {
const liElement = document.createElement('li');
const textSpan = document.createElement('span');
textSpan.textContent = text;
const deleteButton = document.createElement('button');
deleteButton.textContent = '削除';
deleteButton.addEventListener('click', function () {
liElement.remove();
console.log('項目を削除:', text);
});
liElement.append(textSpan, deleteButton);
return liElement;
}
function addRemovableItemToList(listElement, text) {
const trimmedText = text.trim();
if (trimmedText === '') {
messageElement.textContent = '項目名が空です。文字を入力してください。';
return;
}
const liElement = createRemovableListItem(trimmedText);
listElement.appendChild(liElement);
messageElement.textContent = `「${trimmedText}」をリストに追加しました。`;
console.log('項目を追加:', trimmedText);
}
itemFormElement.addEventListener('submit', function (event) {
event.preventDefault();
const enteredItem = itemInputElement.value;
messageElement.textContent = '';
addRemovableItemToList(itemListElement, enteredItem);
itemInputElement.value = '';
});
console.log('--- 要素の追加 総合練習テンプレートの準備が完了しました ---');
</script>
</body>
</html>
Day 37 後半のまとめ
Day 37後半では、
createElement()を「部品を作る関数」として使い、 要素生成の処理を整理したこと。appendChild()やappend()を、 「親に子をぶら下げる」という意図で使い分ける感覚を持ったこと。- 削除ボタン付きのリスト項目を作り、 「追加したものを消せる」という完結したミニ機能を実装したこと。
- ユーザー入力を画面に表示するときに、
textContentを使うことで安全性を確保するという視点を意識したこと。
を整理しました。
この「要素を作って、追加して、場合によっては削除する」という一連の流れは、 TODOリスト、チャット、コメント欄、カードUIなど、 動的なWebインターフェースの基礎になります。
今日のコードを何度か書き直しながら、
「どんな要素を、どんな構造で、どんなタイミングで追加・削除するか」
を自分なりに設計してみることで、 DOMを“自分の手で組み立てて動かす”力が、着実に育っていきます。