概要
特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます。
構文
var child = element.appendChild(child);
elementは親要素です。childはelementの下に追加するノードです。戻り値でもあります。
例
// 新しい段落要素を作成し、ドキュメントのbodyの最後に追加します。
var p = document.createElement("p");
document.body.appendChild(p);
注記
childがドキュメント中に既に存在しているノードへの参照の場合、appendChild はそれを現在の位置から新しい位置へ移動します。(すなわち、追加される前に親であったノードから削除する必要はありません。)
このことは、ひとつのノードは同時にドキュメントの 2 つの位置に現れないことを意味します。そのため、ノードがすでにある親ノードに属している場合、まずそこから取り除かれ、「それから」新しい位置に追加されます。
新しい親の下に追加する前に、ノードのコピーを作成するためにcloneNodeを使用することができます。(cloneNode として作成されたコピーは自動的に同期されなくなることに注意してください。)
このメソッドを使って、複数のノードを異なるドキュメント間で移動することはできません。もし異なるドキュメント(例えば AJAX リクエストからの結果を表示するため)からノードを追加したいならば、まずimportNodeを使用します。
appendChild は DOM を使用するウェブプログラミングの基本的なメソッドのひとつです。The appendChild() method inserts a new node into the DOM structure of a document, and is the second part of the one-two, create-and-append process so central to building web pages programmatically.