createElement で要素を作る

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

&lt;div id="container"&gt;&lt;/div&gt;
&lt;button id="addBtn"&gt;要素を追加&lt;/button&gt;

.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 にユーザー入力を入れると、スクリプトが実行される危険があります。