appendChild メソッド
Node.appendChild()
appendChild() メソッドは、 Node オブジェクトの末尾に子 Node オブジェクトを追加するメソッドです。
既存の Node オブジェクトに追加することで新規に作成した Element オブジェクトなどが表示されるようになります。
Document、Element、HTMLElement 以下のエレメントにおいても、 Node インターフェイスを継承していますので、このメソッドで子オブジェクトを追加できます。
var new_elem = document.createElement('p',{id:'id_',class:'css_'});
document.getElementById('container').appendChild( new_elem );
多くの場合、新規にエレメントを作成するには Document.createElement() を利用します。
引数として追加できるオブジェクトは、DocumentFragment, DocumentType, Element, CharacterData のいずれかである必要があります。 返り値は Node オブジェクト。もしくは空の DocumentFragment を返します。
ページ内 Index
追加エラー、関連するメソッドについて
追加エラー
以下の場合はエラーになります。
- 親 Node オブジェクトが、Document, DocumentFragment, Element 以外
- 追加するオブジェクトが DocumentFragment, DocumentType, Element, CharacterData 以外
- 追加するオブジェクトが、親 Node オブジェクトの親
- Document オブジェクトへ Text ノードの追加
- DocumentType の追加先が Document オブジェクト以外
- DocumentFragment を Document オブジェクトに追加する際に、DocumentFragment 以下に複数の Element または Text オブジェクトがある場合
- Document オブジェクト直下が複数の Element になる場合。<html>のみの前提がある。
関連するメソッド
Node インターフェイスにおいて関連するメソッドには以下があります。Element オブジェクトではなく、Node オブジェクトや NodeList を返す場合があります。
| 関連メソッド | 概要 |
|---|---|
| .cloneNode() | Nodeを複製 |
| .compareDocumentPosition() | ノードの相対的な位置 |
| .contains() | 引数のNodeが子孫か否か Boolean型 |
| .getBoxQuads() | NodeのCSSにおいて関連するNodeをリストで返す |
| .getRootNode() | NodeのルートNodeを返す |
| .hasChildNodes() | 子Nodeを持っているか Boolean型 |
| .insertBefore() | Nodeを指定Nodeの前に挿入 |
| .normalize() | 全てのテキストNodeを削除 |
| .removeChild() | 指定した子Nodeを削除 |
| .replaceChild() | 指定した子Nodeを置き換える |
似たメソッドに Element.append() があります。このメソッドはオブジェクト、テキストどちらも受け付けます。
innerHTML プロパティに DOMString でエレメントを追加することもできますが、その動作は保証されたものではありません。
Document.write() メソッドで内容を更新することができますが <body> 内に限られ、その内容の全てが更新されます。
Syntax
in JavaScript
返り値は Node オブジェクト。もしくは空の DocumentFragment を返します。
Node = Node.appendChild( object );
引数（Parameter Values）
| Value | 摘要 |
|---|---|
| object | Node を継承した オブジェクト。DocumentFragment, DocumentType, Element, CharacterData のいずれか |
返り値（Return Values）
| Type | 摘要 |
|---|---|
| Node | 引数に指定した Node オブジェクト |