JavaScript での DOM による (X)HTML 操作

page:4/X
author:nobuoka
date:2009.08.05

目次

ノードを生成・追加する

前回までは、ノード木の中に既に存在しているノードを取得する方法を述べました。 今回は、新たにノードを生成し、ノード木に追加する方法を述べます。 (X)HTML で使用する場合に必要となるのは、主に Element ノードと Text ノードを新たに生成し追加する方法だと思うので、ここでは Element ノードの生成の仕方、Text ノードの生成の仕方を説明します。

Element ノード (element 型オブジェクト) の生成

Element ノードを生成するには、 document オブジェクト の createElement メソッド、または createElementNS メソッド を使用します。 createElement メソッドを使用した場合、名前空間は null になります。 一方、createElementNS メソッドでは名前空間を指定することができます。

よって、HTML 要素を生成する場合は createElement メソッド (createElementNS メソッドを使用し、名前空間を null にしても可) を使用します。 XHTML 要素を生成する場合は createElementNS メソッドを使用し、名前空間に "http://www.w3.org/1999/xhtml" を指定します。 

// 名前空間が null の div 要素を生成 (HTML 用)
var divElem1 = document.createElement("div");
// 名前空間が "http://www.w3.org/1999/xhtml" の div 要素を生成 (XHTML 用)
var divElem2 = document.createElementNS("http://www.w3.org/1999/xhtml", "div");

ただし、IE (ver.8 以前) では createElementNS メソッドは実装されていないということに注意してください。

Text ノードの生成

Text ノードを生成するには、 document オブジェクト の createTextNode メソッド を使用します。 

// Text ノードを生成
var textNode = document.createTextNode("新しく生成されたテキストです！");

新たに生成したノードを、子ノードに追加する

新しく生成されたノードは、そのままではどのノードの子ノードでもないので、文書中には現れません。 つまり生成するだけでは意味がありません。 生成した後、ノード木中のいずれかのノードの子に追加してやる必要があります。

ここでは新たに生成したノードを、別のノードの子に追加する方法を説明します。 ノードを子に追加するには、 Node インターフェイス の appendChild メソッド を使用します。 

// 新しい要素を生成
var divElem = document.createElement("div");
// テキストノードを生成し, divElem の子に追加
divElem.appendChild( document.createTextNode("新しいテキストです！") );
// body 要素を取得
var bodyElem = document.getElementsByTagName("body");
// body 要素の子に divElem を追加
bodyElem.appendChild( divElem );

appendChild メソッドは Node インターフェイスで定義されているので、あらゆるノードで appendChild メソッドを使用できるわけですが、ほとんどは Element ノードに Element ノードか Text ノードを追加するという使い方になると思います。

Sample

新たに div 要素と Text ノードを生成し、body 要素の子に繰り返し追加するという処理を行うサンプルです。

どのようなコードを書いているのかはソースコードをご覧ください。

参考文献

Google Adsense!!