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() の定義	廃止	初期定義。

ブラウザー実装状況

BCD tables only load in the browser