備忘録的プログラミングリファレンス

appendChild メソッド

Node.appendChild()

 appendChild() メソッドは、 Node オブジェクトの末尾に子 Node オブジェクトを追加するメソッドです。 既存の Node オブジェクトに追加することで新規に作成した Element オブジェクトなどが表示されるようになります。
 DocumentElementHTMLElement 以下のエレメントにおいても、 Node インターフェイスを継承していますので、このメソッドで子オブジェクトを追加できます。

エレメントの追加
var new_elem = document.createElement('p',{id:'id_',class:'css_'});
document.getElementById('container').appendChild( new_elem );
詳しくはExampleを参照してください

 多くの場合、新規にエレメントを作成するには 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摘要
objectNode を継承した オブジェクト。DocumentFragment, DocumentType, Element, CharacterData のいずれか

返り値(Return Values)

Type摘要
Node引数に指定した Node オブジェクト

Example