Terms Privacy

© Rollpie

JavaScript
16 Jan 2026

appendChild と append の違い

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('テキストを直接追加');

違いのまとめ

機能appendChildappend
追加できる数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 を使う、という使い分けでよいでしょう。

9 views