Day16：DOM操作②の練習問題
createElement と appendChild は「新しい要素を作って、DOM に追加する」ための基本操作です。
Day16 の内容をしっかり定着させるために、段階的な練習問題と丁寧な解説をまとめます。
基本問題：要素を作って追加する
問題1：新しい p 要素を作り、id=”container” の中に追加してください
次の HTML を前提とします。
<div id="container"></div>
p 要素の中身は「こんにちは」にしてください。
解答と解説
const container = document.getElementById("container");
const p = document.createElement("p");
p.textContent = "こんにちは";
container.appendChild(p);
createElement で p 要素を作り、textContent で文字を設定し、
appendChild で container の子どもとして追加しています。
「作る → 中身を設定 → 親に追加」の三段階が基本です。
基本問題：複数の要素を追加する
問題2：ボタンを押すたびに「追加されました」という p 要素を追加してください
次の HTML を前提とします。
<button id="addButton">追加</button>
<div id="container"></div>
解答と解説
const addButton = document.getElementById("addButton");
const container = document.getElementById("container");
addButton.addEventListener("click", () => {
const p = document.createElement("p");
p.textContent = "追加されました";
container.appendChild(p);
});
クリックイベントの中で createElement と appendChild を行うことで、
押すたびに新しい要素が増えていきます。
DOM を「動的に増やす」最も基本的なパターンです。
応用問題：番号付きで追加する
問題3：追加される p 要素に「メモ1」「メモ2」…と番号を付けてください
次の HTML を前提とします。
<button id="addButton">追加</button>
<div id="container"></div>
解答と解説
const addButton = document.getElementById("addButton");
const container = document.getElementById("container");
let count = 0;
addButton.addEventListener("click", () => {
count += 1;
const p = document.createElement("p");
p.textContent = `メモ${count}`;
container.appendChild(p);
});
count 変数で「何回追加されたか」を管理しています。
DOM 操作は「状態（count）と表示（textContent）」を結びつける練習にもなります。
応用問題：ユーザー入力を使って要素を追加する
問題4：入力欄の内容を新しい p 要素として追加してください
次の HTML を前提とします。
<input id="textInput" type="text">
<button id="addButton">追加</button>
<div id="container"></div>
解答と解説
const textInput = document.getElementById("textInput");
const addButton = document.getElementById("addButton");
const container = document.getElementById("container");
addButton.addEventListener("click", () => {
const text = textInput.value;
if (text === "") {
return;
}
const p = document.createElement("p");
p.textContent = text;
container.appendChild(p);
textInput.value = "";
});
ユーザー入力を textContent に入れることで、
安全に画面へ表示できます。
innerHTML を使うと XSS の危険があるため、textContent が基本です。
発展問題：複数の要素を組み合わせた「カード」を追加する
問題5：タイトルと本文を持つカードを作って追加してください
次の HTML を前提とします。
<button id="addButton">カード追加</button>
<div id="cardContainer"></div>
カードの構造は以下のようにしてください。
<div class="card">
<h2>タイトル</h2>
<p>本文</p>
</div>
タイトルは「カード1」「カード2」…
本文は「これは1つ目のカードです」…のように番号を使ってください。
解答と解説
const addButton = document.getElementById("addButton");
const cardContainer = document.getElementById("cardContainer");
let count = 0;
addButton.addEventListener("click", () => {
count += 1;
const card = document.createElement("div");
card.className = "card";
const title = document.createElement("h2");
title.textContent = `カード${count}`;
const body = document.createElement("p");
body.textContent = `これは${count}つ目のカードです。`;
card.appendChild(title);
card.appendChild(body);
cardContainer.appendChild(card);
});
ここでは createElement と appendChild を“入れ子”にして、
複数の要素を組み合わせた「まとまり」を作っています。
これが DOM 操作の本質であり、UI コンポーネントの基礎です。
セキュリティ・堅牢性の問題：親要素が存在しない場合の対処
問題6：id=”container” が存在しない場合、エラーを出して処理を中断してください
次の HTML を前提とします。
<button id="addButton">追加</button>
container が存在しない場合に備えたコードを書いてください。
解答と解説
const addButton = document.getElementById("addButton");
const container = document.getElementById("container");
if (!container) {
console.error("id=\"container\" の要素が見つかりません。HTML を確認してください。");
} else {
addButton.addEventListener("click", () => {
const p = document.createElement("p");
p.textContent = "追加されました";
container.appendChild(p);
});
}
DOM 操作では「要素が存在しない」ことがよくあります。
null のまま appendChild を呼ぶとエラーになるため、
安全性のために null チェックは非常に重要です。
Day16 練習問題まとめ
Day16 の createElement と appendChild を使うことで、
JavaScript で HTML を“生み出して組み立てる”力が身につきます。
今回の練習問題で、
・要素を作る
・中身を設定する
・親に追加する
・イベントと組み合わせて動的に増やす
・複数の要素を組み合わせたカードを作る
・安全な DOM 操作（null チェック・textContent の利用）
といった、実務でも必須の DOM 操作の基礎がしっかり定着します。