導入: なぜ今さらappendChildなのか
Web開発において、JavaScriptで動的に要素を追加する操作は避けて通れません。その中でも最も基本的なAPIがNode.appendChildです。しかし、現代のモダンな開発現場では、パフォーマンスや可読性の観点から「どのメソッドをいつ使うべきか」という判断が求められます。本記事では、appendChildの基本から、実務で効率的にDOMを操作するためのポイントを解説します。
基礎知識: appendChildとは何か
Node.appendChildは、特定の親ノードの最後の子として、新しいノードを追加するためのDOM APIです。
・役割: 指定した親ノードの末尾に子ノードを移動または追加する。
・特徴: 追加する対象が既にドキュメント内に存在する場合、その要素は元の場所から削除され、新しい場所へ「移動」します（複製ではなく移動である点に注意が必要です）。
・戻り値: 追加されたノード自体を返します。
実装/解決策: 基本的な使い方
DOM操作の基本フローは「要素の作成」「属性の設定」「親への追加」という3ステップです。
サンプルプログラム: 実用的な要素追加の実装
以下は、ボタンクリックでリストに項目を追加する実践的なコード例です。
応用・注意点: 現場で役立つ知見
実務においてappendChildを使用する際は、以下の3点に注意してください。
1. append() との使い分け
モダンブラウザでは、appendChildの進化版であるNode.append()が利用可能です。append()は複数のノードを一度に追加でき、文字列を直接渡すこともできるため、コード量を削減できます。互換性が不要であればappend()の使用を推奨します。
2. パフォーマンスへの配慮（DocumentFragment）
ループ処理などで大量の要素を一度に追加する場合、毎回appendChildを呼ぶと、そのたびにリフロー（画面の再描画）が発生し、サイトが重くなります。このような場合はDocumentFragmentを使用してメモリ上で構築してから、一度だけDOMに追加するようにしましょう。
3. セキュリティ（XSS対策）
textContentを使わずにinnerHTMLで文字列を挿入すると、悪意のあるスクリプトが実行されるリスクがあります。ユーザー入力を扱う際は必ずtextContentやcreateElementを使い、DOM要素として構築する癖をつけましょう。
appendChildは非常に強力なAPIですが、現代の開発では「どのAPIが最も簡潔かつ安全か」を意識することが、バグの少ないクリーンなコードへの近道です。