【JavaScript入門】要素の作成と追加

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

要素の作成と追加

　静的に書かれた HTML だけでは、ユーザーの操作や外部データに合わせて内容を増減させることができません。JavaScript には document.createElement() で要素を生成し、appendChild() や insertBefore() で DOM ツリーへ挿入する仕組み が備わっています。ここでは「生成 → 挿入 → 置換 / 削除」という一連の流れを段階的に解説し、実際にリストへ料理を追加・差し替えするデモを作成します。

１．要素ノードを生成する

1.1. `document.createElement()` の基本

引数にはタグ名を 小文字 で渡す。戻り値はまだ DOM に属していない“孤立ノード”。

const card = document.createElement('section'); // <section></section>

1.2. 生成直後にプロパティを設定

作った要素は通常の Element と同じく id や classList を操作できる。

card.id = 'todaySpecial';
card.className = 'card';
card.innerHTML = '<h3>本日のスープ</h3><p>ミネストローネ</p>';

２．ツリーへ挿入・移動・削除するメソッド

メソッド	主な用途	戻り値
`appendChild(n)`	子ノード末尾に追加	追加したノード
`insertBefore(n, ref)`	`ref` の直前へ挿入	追加したノード
`replaceChild(n, old)`	`old` を `n` に置換	取り除いたノード
`removeChild(n)`	子ノード `n` を削除	取り除いたノード
`cloneNode(deep?)`	ノード複製（`deep` で子孫含むか）	新ノード

３．実践サンプル ― メニューに料理を動的追加

ファイル名： create_append_demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素の作成と追加デモ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body{font-family:sans-serif;margin:2rem}
span.badge{color:#fff;background:#e74c3c;border-radius:4px;padding:0 .4em;font-size:.8em}
li{margin:.25rem 0}
</style>
</head>
<body>
<h2>🍽 本日のおすすめメニュー</h2>

<ul id="menu">
  <li>マルゲリータピザ</li>
  <li>カルボナーラ</li>
  <li>ティラミス</li>
</ul>

<script>
/* ---------- 1. 末尾に「ジェラート」を追加 ---------- */
const gelato = document.createElement('li');
gelato.innerHTML = 'ジェラート <span class="badge">新登場</span>';
document.getElementById('menu').appendChild(gelato);

/* ---------- 2. 先頭に「ミネストローネ」を追加 ---------- */
const soup = document.createElement('li');
soup.innerHTML = 'ミネストローネ <span class="badge">HOT</span>';
const menu   = document.getElementById('menu');
menu.insertBefore(soup, menu.firstChild);

/* ---------- 3. 2 番目の料理を「ボロネーゼ」に置換 ---------- */
const bolognese = document.createElement('li');
bolognese.textContent = 'ボロネーゼ';
menu.replaceChild(bolognese, menu.children[1]);

/* ---------- 4. 最後の料理を削除（売切れ） ---------- */
setTimeout(() => {
  const last = menu.lastElementChild;
  menu.removeChild(last);
}, 3000);
</script>
</body>
</html>

ブラウザの挙動

ページ読み込み直後 ミネストローネ HOT マルゲリータピザボロネーゼティラミスジェラート新登場
3 秒後「ジェラート」が売切れでリストから消える。

ブラウザの出力例

プログラム解説

行	処理	使用 API
16–18	`<li>` を生成し末尾へ追加	`createElement` + `appendChild`
21–24	先頭位置へ挿入	`insertBefore(新, menu.firstChild)`
27–28	既存 2 番目を新ノードで置換	`replaceChild`
31–33	3 秒後に最後の子を削除	`lastElementChild` + `removeChild`

4．パターン別 Tips

4.1. 複製して大量追加

const template = document.querySelector('#tpl').content;
for(let i=0;i<10;i++){
  menu.appendChild(template.cloneNode(true));
}

4.2. DocumentFragment で一括挿入

const frag = document.createDocumentFragment();
items.forEach(txt=>{
  const li = document.createElement('li');
  li.textContent = txt;
  frag.appendChild(li);
});
menu.appendChild(frag); // 再描画は 1 回

まとめ

生成： document.createElement('tag') で孤立ノードを作る。
追加： appendChild（末尾） / insertBefore（任意位置）。
差し替え・削除： replaceChild と removeChild。
複製・バッチ操作： cloneNode と DocumentFragment を活用すると効率的。

　これらの API を組み合わせることで、Ajax や WebSocket で取得したデータをそのまま DOM へ描画するインタラクティブな UI を構築できます。

【JavaScript入門】要素の作成と追加