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

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 を引数に使用することができます。
 他にコンテンツを追加する方法には、innerTextinnerHTML プロパティを利用する方法があります。これらのプロパティはオブジェクトへの変換がうまく行かないことがあるようです。
 詳しくは、エレメントの作成についてを参照してください。

ページ内 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摘要
objectNode を継承した オブジェクト。DocumentFragment, DocumentType, Element, CharacterData のいずれか

返り値(Return Values)

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

Example