指定した要素の子ノードのリストの最後に、ノードを挿入します。 もし追加するために指定したノードが既に存在するノードであれば、現在の親ノードから削除され、 親ノードの新しい子ノードとして追加されます。

文法

var child = element.appendChild(child);

elementは親となる要素(Element)です。

引数	説明
child	要素に追加するノードを指定します。 また、このノードへの参照が戻り値にもなります。

例

// 新しいP要素が作られ、bodyの最後に追加されます。
var p = document.createElement("p");
document.body.appendChild(p);

注意事項

もし、追加するノードが既にdocument内に存在するノードの参照であった場合、appendChildは、 それを現在の位置から新しい位置に移動します。そのため、元の位置にあったノードは実質削除されることになります。

これはdocument内に同時に2つの場所に存在できないことを意味します。 そのため、まず削除が行われた後に、新しい位置に追加されます。

.cloneNodeを使用して、 新しい親ノードに追加される前に、そのノードを複製を作ることが可能です。 (cloneNodeによる複製は、同期しないことに注意してください。)

このメソッドは、異なるdocumentの間でノードを移動することは出来ません。 もし、異なるドキュメントでノードを追加したい場合(例えば、Ajaxリクエストの結果を表示するなど)、 document.importNodeを使用しなければいけません。

appendChild()は、DOMを使用したWebプログラミングの基盤となるメソッドの1つです。 appendChild()メソッドは、documentのDOM構造に新しいノードを挿入します。 これはWebページ構築プログラミングの中心となるプロセスである「1.作成」と「2.追加」の「2.追加」に該当するものです。

仕様

• DOM Level 3 Core: appendChild

関連項目

• Node.removeChild
• Node.replaceChild
• Node.insertBefore
• Node.hasChildNodes

 Back to top