createElement() は、JavaScriptで新しいHTML要素を作成するためのメソッドです。動的に要素を追加したい場合によく使用されます。今回は、createElement() の基本的な使い方から注意点までをまとめていきたいと思います。
JavaScript
document.createElement(tagName);tagName：作成する要素のタグ名（例:div,p,buttonなど）- 戻り値：指定したタグの新しい要素（
HTMLElementオブジェクト）
このメソッドで作成した要素は、初期状態ではDOMに追加されません。追加するには、appendChild() などのメソッドを使用します。
See the Pen Untitled by tones (@tonescodedesign) on CodePen.
JavaScript
// 1. 新しい p 要素を作成
const newParagraph = document.createElement('p');
// 2. テキストを追加
newParagraph.textContent = 'これは新しく追加された段落です。';
// 3. 親要素に追加
document.getElementById('container').appendChild(newParagraph);HTML
<div id="container"></div>この例では、createElement('p') を使って <p> 要素を作成し、textContent でテキストを追加した後、appendChild() でDOMに追加しています。
See the Pen createElement by tones (@tonescodedesign) on CodePen.
JavaScript
// 1. ボタンを作成
const button = document.createElement('button');
// 2. ボタンのテキストを設定
button.textContent = 'クリックしてね';
// 3. クリック時のイベントを追加
button.addEventListener('click', () => {
alert('ボタンがクリックされました！');
});
// 4. ボタンをDOMに追加
document.getElementById('button-container').appendChild(button);HTML
<div id="button-container"></div>この例では、ボタンを作成し、クリックイベントを追加した後、DOMに追加しています。
- 動的に要素を追加できる：必要なタイミングで要素を作成・挿入可能
- 再利用可能なコンポーネントを作成しやすい：JavaScriptを用いたテンプレート生成が容易
- イベントリスナーの設定が簡単：作成時に直接イベントを追加できる
createElement() で作成した要素は、最初はDOMツリーに存在しない ため、appendChild() などで追加する必要があります。
JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = '追加されないと表示されない！';
// document.body.appendChild(newDiv); をしないと表示されない要素を作成・追加する方法として innerHTML を使うことも可能ですが、createElement() の方が安全でパフォーマンスが良い です。
JavaScript
// innerHTML を使う方法（非推奨）
document.getElementById('container').innerHTML = '<p>直接HTMLを書き込む</p>';innerHTMLを使用すると、HTMLの解析と再構築が必要になるため、createElement()に比べて処理が重くなり、パフォーマンスに影響を与えることがあります。
createElement()で要素を追加する際は、適切なアクセシビリティ対応を行いましょう。
- フォーカス可能な要素を追加する場合は
tabindexを設定する - スクリーンリーダー対応のために
aria-labelを設定する
JavaScript
const newButton = document.createElement('button');
newButton.textContent = '送信';
newButton.setAttribute('aria-label', '送信ボタン');
newButton.setAttribute('tabindex', '0');
document.body.appendChild(newButton);
