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 オブジェクト |