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