要素の生成の基本 — const n = document.createElement('div')
画面に新しい箱（要素）を追加したいときは document.createElement(tagName) を使います。作っただけでは表示されないので、「中身を設定 → 既存の親に追加」という流れで扱います。
基本の作り方と追加手順
<div id="app"></div>
<script>
// 1) 要素を作る
const n = document.createElement("div");
// 2) 中身や見た目を設定
n.textContent = "こんにちは"; // テキストを入れる
n.className = "greeting"; // クラスを付ける
n.setAttribute("data-id", "42"); // 属性を付ける
// 3) 既存の親に追加（これで初めて画面に出る）
document.getElementById("app").appendChild(n);
</script>
- 作成:
createElement("div")のようにタグ名を渡します。 - 設定:
textContent、className、setAttribute、styleなどで見た目やデータをセット。 - 追加:
appendChildで親要素にぶら下げると表示されます。
よく使うテンプレート集
ラベル: ボタンを動的に作ってクリック処理を付ける
const btn = document.createElement("button");
btn.type = "button";
btn.textContent = "購入する";
btn.addEventListener("click", () => {
console.log("購入処理を開始");
});
document.body.appendChild(btn);
- ポイント: 作成→設定→イベント→追加の順で組み立てると分かりやすい。
ラベル: 複数の子要素をまとめて作る（カードUI）
function createCard({ title, body }) {
const card = document.createElement("article");
card.className = "card";
const h = document.createElement("h3");
h.textContent = title;
const p = document.createElement("p");
p.textContent = body;
card.append(h, p); // 複数まとめて追加できる（appendChildでもOK）
return card;
}
document.getElementById("app").appendChild(
createCard({ title: "お知らせ", body: "明日は休館日です" })
);
- ポイント: 小さな関数化で再利用しやすく。
appendは複数引数や文字列も扱えます。
ラベル: HTML文字列を入れる（XSS対策に注意）
const box = document.createElement("div");
box.className = "content";
// 安全な静的HTMLのみ innerHTML を使う
box.innerHTML = "<strong>重要:</strong> ルールを確認してください";
document.body.appendChild(box);
- ポイント:
innerHTMLは便利ですが、動的な未検証文字列の代入は避ける。テキストはtextContentを使う。
ラベル: リストを高速に作る（DocumentFragment）
const frag = document.createDocumentFragment();
for (let i = 1; i <= 5; i++) {
const li = document.createElement("li");
li.textContent = `Item ${i}`;
frag.appendChild(li);
}
document.querySelector("ul#items").appendChild(frag);
- ポイント: まとめて追加すると reflow を減らし、パフォーマンスに優しい。
ラベル: ある要素の直前に差し込む（insertBefore）
const ref = document.querySelector(".ref");
const badge = document.createElement("span");
badge.className = "badge";
badge.textContent = "NEW";
ref.parentNode.insertBefore(badge, ref); // refの直前に挿入
- ポイント: 位置を細かく指定して挿入したいときに便利。
実務でのコツ
- ラベル: クラス/属性/データの役割分担
- クラス: 見た目や状態（.active, .error）
- 属性: 既定動作（href, src, alt）
- data-属性: 軽い識別や状態（data-id, data-status）
- ラベル: テキストは textContent
- HTMLを埋めたい特別な場合を除き、ユーザー入力の表示は
textContentを使うと安全。
- HTMLを埋めたい特別な場合を除き、ユーザー入力の表示は
- ラベル: まとめて作るときは Fragment
- 大量追加は
DocumentFragment→ まとめて1回のappendChildが定石。
- 大量追加は
- ラベル: スタイルはCSSで管理
- JSで
styleを直接書きすぎない。クラス切り替え（classList）で見た目を制御。
- JSで
ありがちなハマりポイントと対策
- ラベル: 作ったのに表示されない
- 原因: 親へ追加していない。
- 対策: 最後に必ず
appendChild（またはappend）で既存のDOMにぶら下げる。
- ラベル: innerHTMLの乱用
- 原因: 文字列連結で安全性や可読性が悪化。
- 対策: 要素を作って組み立てる。動的テキストは
textContent。
- ラベル: イベントが効かない
- 原因: 作成後に
addEventListenerを付け忘れ。 - 対策: コンポーネント関数内でイベント登録までを完結させる。
- 原因: 作成後に
- ラベル: パフォーマンス低下
- 原因: ループで毎回DOMへ直接追加。
- 対策: まず Fragment に溜めてから一括追加。
練習問題（手を動かして覚える）
<div id="app"></div>
<ul id="list"></ul>
<script>
// 1) 見出し＋ボタンを作って追加
const title = document.createElement("h2");
title.textContent = "メニュー";
const addBtn = document.createElement("button");
addBtn.type = "button";
addBtn.textContent = "追加";
document.getElementById("app").append(title, addBtn);
// 2) クリックでリストに項目を追加（連番）
let n = 0;
const list = document.getElementById("list");
addBtn.addEventListener("click", () => {
n++;
const li = document.createElement("li");
li.textContent = `Item ${n}`;
li.dataset.id = String(n); // data-* で識別子をセット
list.appendChild(li);
});
// 3) 5件まとめて追加（Fragment）
const frag = document.createDocumentFragment();
for (let i = 1; i <= 5; i++) {
const li = document.createElement("li");
li.textContent = `Batch ${i}`;
frag.appendChild(li);
}
list.appendChild(frag);
</script>
直感的な指針
- 作る → 設定する → 追加する、の3ステップが基本。
- テキストは textContent、見た目はクラス、識別は data- に。*
- 大量追加は Fragment を使ってサクッと。