createElement は、JavaScript で新しい HTML 要素を作成するメソッドです。動的にコンテンツを追加するときの基本となります。
基本的な使い方
document.createElement(tagName) でタグ名を指定して要素を作ります。
const div = document.createElement('div'); const p = document.createElement('p'); const button = document.createElement('button');
この時点では要素が作られただけで、まだページには表示されません。表示するには DOM に追加する必要があります。
要素に中身を入れる
作成した要素にテキストや属性を設定します。
const p = document.createElement('p'); p.textContent = 'こんにちは！'; p.id = 'greeting'; p.className = 'message';
ページに追加する
appendChild などを使って DOM に追加すると、ページに表示されます。
const p = document.createElement('p'); p.textContent = 'こんにちは！'; document.body.appendChild(p); // body の末尾に追加
実際に動かしてみよう
ボタンをクリックすると、新しい要素が追加されます。
HTML
CSS
JavaScript
<div id="container"></div> <button id="addBtn">要素を追加</button>
.item { padding: 8px; margin: 4px; background: #e0e0e0; border-radius: 4px; }
let count = 0; document.getElementById('addBtn').addEventListener('click', function() { count++; const item = document.createElement('div'); item.className = 'item'; item.textContent = '項目 ' + count; document.getElementById('container').appendChild(item); });
複数の属性を設定する
const link = document.createElement('a'); link.href = 'https://example.com'; link.textContent = 'リンク'; link.target = '_blank'; link.rel = 'noopener';
createElement と innerHTML の違い
createElement
安全で高速。要素を個別に作成して操作できる
innerHTML
文字列で一気に書ける。XSS に注意が必要
ユーザー入力を含む場合は createElement + textContent が安全です。innerHTML にユーザー入力を入れると、スクリプトが実行される危険があります。
