appendChild と append はどちらも要素を追加するメソッドですが、いくつかの違いがあります。新しい append のほうが便利ですが、appendChild も現役で使われています。
appendChild の基本
appendChild は、親要素の末尾に子要素を1つ追加します。
const parent = document.getElementById('container'); const child = document.createElement('p'); child.textContent = '新しい段落'; parent.appendChild(child);
戻り値は追加した要素です。
const added = parent.appendChild(child); console.log(added === child); // true
append の基本
append は、より新しい API で、複数の要素やテキストを一度に追加できます。
const parent = document.getElementById('container'); // 複数の要素を一度に追加 const p1 = document.createElement('p'); const p2 = document.createElement('p'); p1.textContent = '段落1'; p2.textContent = '段落2'; parent.append(p1, p2);
テキストも直接追加できます。
parent.append('テキストを直接追加');
違いのまとめ
| 機能 | appendChild | append |
|---|---|---|
| 追加できる数 | 1つ | 複数 |
| テキスト追加 | 不可 | 可能 |
| 戻り値 | 追加した要素 | undefined |
| IE対応 | あり | なし |
実際に動かしてみよう
HTML
CSS
JavaScript
<div id="container"> <p>既存の要素</p> </div> <button id="appendChildBtn">appendChild</button> <button id="appendBtn">append</button>
#container p { padding: 4px; margin: 4px; background: #f0f0f0; }
let count = 0; document.getElementById('appendChildBtn').addEventListener('click', function() { count++; const p = document.createElement('p'); p.textContent = 'appendChild で追加 ' + count; document.getElementById('container').appendChild(p); }); document.getElementById('appendBtn').addEventListener('click', function() { count++; const p = document.createElement('p'); p.textContent = 'append で追加 ' + count; document.getElementById('container').append(p); });
prepend もあります
append の仲間で、要素の先頭に追加する prepend もあります。
const parent = document.getElementById('container'); const first = document.createElement('p'); first.textContent = '最初に追加'; parent.prepend(first); // 先頭に追加
基本的には append を使い、IE 対応が必要なら appendChild を使う、という使い分けでよいでしょう。
