Node.appendChild

Node.appendChild() メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます(他のノードに追加する前にそのノードを親ノードから削除する必要はありません)。

これは、ノードが同時にドキュメントの 2 箇所に存在できないということを意味します。ノードがすでに親を持っている場合、最初にノードが削除された後、新しい位置の末尾に追加されます。Node.cloneNode() は、新しい親の末尾に追加する前に、ノードのコピーを作成するために使用できます。cloneNode で作成したコピーは自動的に同期を保たないことに注意してください。

このメソッドでは、異なるドキュメント間でノードを移動することはできません。異なるドキュメントからノードを末尾に追加したい場合は、document.importNode() メソッドを使用する必要があります。

構文

var aChild = element.appendChild(aChild);

引数

aChild

親ノードに追加する子ノード(要素)

戻り値

追加した子ノードです。ただし、DocumentFragmentを引数にした場合は、空のDocumentFragmentが戻ります。

注意

appendChild() が子要素を返すため、メソッドチェーンが期待通りに動きません。:

var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));

aBlock に <b></b> を与えただけでは期待通りに動きません。

// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。
var p = document.createElement("p");
document.body.appendChild(p);

仕様

仕様 ステータス コメント
DOM
Node.appendChild() の定義
現行の標準 Document Object Model (DOM) Level 3 Core Specification から変更なし。
Document Object Model (DOM) Level 3 Core Specification
Node.appendChild() の定義
廃止された Document Object Model (DOM) Level 2 Core Specification から変更なし。
Document Object Model (DOM) Level 2 Core Specification
Node.appendChild() の定義
廃止された Document Object Model (DOM) Level 1 Specification から変更なし。
Document Object Model (DOM) Level 1 Specification
Node.appendChild() の定義
廃止された 初期定義。

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
appendChildChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 5Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報