ノードを新たに作成する - JavaScript Ajax プログラミング

PROGRAM

JavaScript の DOM (Document Object Model) では、タグやテキストといった情報をノードとして持っています。

このノードを新たに作成したい場合、たとえば DIV タグを作成したい場合には、次のようにします。

pNode = document.createElement('div');

A タグを作成する場合であれば、次のような感じでしょうか。

anchorNode = document.createElement('a');

anchorNode.setAttribute('href', 'http://xxxx/');

テキストを新たに作成したい場合には、次のようにします。

textNode = document.createTextNode('ノードに設定したいテキスト');

出来上がったノードは appendChild メソッドを使用して、あるノードの子ノードとして登録することが可能です。

anchorNode.appendChild(textNode);

pNode.appendChild(anchorNode);

たとえばこれまでの例では、次のような HTML が出来上がったことになります。

<div>

ノードに設定したいテキスト

</a>

</div>

DIV タグを親として、その中に A タグでリンクが設定されたテキストが保持されたノードのできあがりです。

createElement や createTextNode だけでは、そのタグから子へと階層を辿った 1 連のノードを作成して行く感じになります。

複数のタグを平行して一度に扱いたい場合には、次のように createDocumentFragment を利用します。

pFrame = document.createDocumentFragment();

こうしたら、たとえば次のような DIV タグを用意して、

divNode1 = document.createElement('div');

divNode2 = document.createElement('div');

textNode1 = document.CreateTextNode('テキスト１');

textNode2 = document.CreateTextNode('テキスト２');

divNode1.appendChild(textNode1);

divNode2.appendChild(textNode2);

これらの divNode1 と divNode2 を、次のように appendChild を使用して Document Fragment に追加します。

pFrame.appendChild(divNode1);

pFrame.appendChild(divNode2);

こうすると、全体としては次の HTML が作成されたことになります。

<div>

テキスト１

</div>

<div>

テキスト２

</div>

このように 2 つの DIV タグが並列に存在するノードの出来上がりです。

このノードを appendChild メソッドで他のノードに追加してあげれば、これら複数のタグをいちどに追加することが可能です。いくつものノードを編成して、最後に一括して文書に適用したい場合などに効率的です。