導入：なぜ今、改めて createElement なのか
モダンなフロントエンド開発では、ReactやVueなどのライブラリを使用することが一般的です。しかし、パフォーマンスが求められる軽量なスクリプトや、外部ライブラリに依存できない環境、あるいは複雑なDOM操作を避けたい場面において、ネイティブの「Document.createElement」は依然として強力なツールです。innerHTMLを使った文字列操作による生成は手軽ですが、XSS（クロスサイトスクリプティング）のリスクや、再描画のコストという課題があります。createElementを使用することで、安全かつ効率的にDOMを構築することが可能になります。
基礎知識：createElement の仕組み
Document.createElement は、指定したタグ名のHTML要素をメモリ上に生成するメソッドです。ポイントは、生成された時点ではその要素はまだブラウザの画面上（DOMツリー）には存在しないという点です。生成した要素に属性（idやclass）やテキストを追加し、最後に「appendChild」や「append」メソッドを使って既存のDOMツリーに組み込むことで初めて表示されます。これにより、必要な要素を事前に準備してから一度に挿入するといった、リフロー回数を抑えた最適化も容易になります。
実装：具体的手順
DOMを生成する手順は以下の3ステップです。
1. 要素の生成：Document.createElement(‘タグ名’) を実行。
2. 属性・コンテンツの付与：textContentやsetAttributeを使用してプロパティを更新。
3. DOMツリーへの挿入：親要素に対して appendChild を実行。
サンプルプログラム：動的なリスト生成の実装
以下は、ボタンを押すとリストアイテムが動的に追加される、実用的なサンプルコードです。
応用・注意点：現場で陥りやすい罠
createElement を使用する際に最も注意すべきは、過度なDOM操作によるパフォーマンス低下です。ループ処理の中で毎回 appendChild を呼び出すと、そのたびにブラウザのレンダリングエンジンが再計算を行い、画面がカクつく原因になります。
これを防ぐためには、DocumentFragment を活用しましょう。DocumentFragment はメモリ上だけに存在する一時的な入れ物です。複数の要素を一度に生成してこの断片に格納し、最後に一度だけ DOM に挿入することで、DOMアクセスを最小限に抑えることが可能です。また、ユーザー入力をそのまま textContent に代入する際は問題ありませんが、HTMLタグを含む文字列を扱う場合は、セキュリティリスクを考慮し、必ず Sanitizer API や適切なエスケープ処理を併用するようにしてください。