Node.appendChild()

appendChild() は Node インターフェイスのメソッドで、指定された親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していた場合は、 appendChild() はその子ノードを現在の位置から新しい位置へ移動します（他のノードに追加する前に、そのノードを親ノードから取り除く必要はありません）。

これは、 1 つのノードが同時に文書の 2 か所に存在できないということです。したがって、すでにノードに親がある場合、最初にノードが取り除かれた後、新しい位置に追加されます。 Node.cloneNode() メソッドを使用すると、新しい親ノード以下に追加する前に、ノードのコピーを作成することができます。 cloneNode で作成したコピーは自動的に同期されません。

指定された子ノードが DocumentFragment であった場合、その DocumentFragment の内容全体が指定された親ノードの子ノードリストに移動します。

メモ: このメソッドとは異なり、 Element.append() メソッドは複数の引数や文字列の追加に対応しています。ノードが要素であった場合は、こちらを使用することができます。

appendChild() は子要素を返すので、メソッドチェーンは動作しません。

let aBlock = document.createElement('block').appendChild( document.createElement('b') );

aBlock に <b></b> を追加するだけですが、 block に対して複数の appendChild を連鎖させるなど、それ以外の操作を連鎖させることはできません。

構文

appendChild(aChild);

引数

aChild: 指定された親ノードに追加するノード（ふつうは要素）。

返値

Node で追加された子ノード (aChild) を返します。ただし、 aChild が DocumentFragment であった場合は、空の DocumentFragment を返します。

例外

HierarchyRequestError DOMException

DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。

aChild の親が Document, DocumentFragment, Element のいずれにもならない場合。
aChild を挿入すると循環参照になる場合。すなわち aChild がこのノードの祖先である場合。
aChild が DocumentFragment, DocumentType, Element, CharacterData のいずれでもない場合。
現在のノードが Text であり、親ノードが Document になる場合。
現在のノードが DocumentType であり、その親が Document にならない場合。 doctype は常に document の直下になければならないからです。
このノードの親が Document で aChild が DocumentFragment であり、複数の Element の子、または Text の子がある場合。 -aChild を挿入すると Document の子の Element が複数になる場合。

例

// 新しい段落要素を作成し、文書の body の末尾に追加します。
let p = document.createElement("p");
document.body.appendChild(p);

仕様書

Specification
DOM Standard # dom-node-appendchild

ブラウザーの互換性

BCD tables only load in the browser