Node.appendChild()
appendChild() は Node インターフェイスのメソッドで、指定された親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していた場合は、 appendChild() はその子ノードを現在の位置から新しい位置へ移動します（他のノードに追加する前に、そのノードを親ノードから取り除く必要はありません）。
これは、 1 つのノードが同時に文書の 2 か所に存在できないということです。したがって、すでにノードに親がある場合、最初にノードが取り除かれた後、新しい位置に追加されます。
Node.cloneNode() メソッドを使用すると、新しい親ノード以下に追加する前に、ノードのコピーを作成することができます。
cloneNode で作成したコピーは自動的に同期されません。
指定された子ノードが DocumentFragment であった場合、その
DocumentFragment の内容全体が指定された親ノードの子ノードリストに移動します。
Note: このメソッドとは異なり、 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 を返します。
例外
HierarchyRequestErrorDOMException-
DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。
aChildの親がDocument,DocumentFragment,Elementのいずれにもならない場合。aChildを挿入すると循環参照になる場合。すなわちaChildがこのノードの祖先である場合。aChildがDocumentFragment,DocumentType,Element,CharacterDataのいずれでもない場合。- 現在のノードが
Textであり、親ノードがDocumentになる場合。 - 現在のノードが
DocumentTypeであり、その親がDocumentにならない場合。 doctype は常に document の直下になければならないからです。 - このノードの親が
DocumentでaChildがDocumentFragmentであり、複数のElementの子、またはTextの子がある場合。
例
// 新しい段落要素を作成し、文書の body の末尾に追加します。
let p = document.createElement("p");
document.body.appendChild(p);
仕様書
| Specification |
|---|
| DOM Standard # dom-node-appendchild |
ブラウザーの互換性
BCD tables only load in the browser