Kangaroonote

  1. Home
  2. Kangaroonote
  3. DOM レポート02 create Element & TextNode

  • Author :
  • 2006-06-01

CSS ばかりをあつかっていても飽きるし、そんなにおもしろいものでもない。

DOM にはさらに、HTML タグやその内部の文書を生成する関数もある。この関数をつかえば、サーチエンジンには空にしか見えない情報たっぷりのサイトを構築できる。

そしてその関数の名は createElement と createTextNode。

createElement はタグを生成する(そろそろタグというのも飽きたし、正確ではないっぽいので以下は node (ノード)と呼ぶことにする)。例えば document.createNode("p"); と書くとノード p が生成される。まだためしてないけれどきっと生成したノードも同じように Script で操作できるだろうから使い方によっては楽しい事ができるっぽい。

そして create.TextNode はテキストを生成する。 document.createNodeText("nipponnchachacha"); と書けばnipponnchachacha というテキストが生成されるというわけだ。

さらに生成したノードに生成したテキストを渡してやれば p というノードに nipponnchachacha というテキストを入れてページに反映させることができる。

んで、ノードにノード(この場合はテキストノード)を追加する関数がapendChild。

var createdp = document.createNode("p"); var createdtext = document.createTextNode("nipponnchachacha"); createdp.appendChid(createdtext);

これで p というノードの中に。テキストノード nipponnchachacha が追加された。

でもこれでおわりというわけじゃあなくて、次に生成したノードをbodyのどこに反映させるのかを定義しなければならない。

そこでまた getElemeNtById とかをつかってみる。

document.getElementById("dived").appendChid(createdp);

これで document中のdived という id をもったブロックに createdp が反映される。

clickでノード生成が反映

といった感じ。ちなみにクリックすればするほどノードは増えていくので、飽きるまで押してみて下さい。

カテゴリ:

トラックバック(0)

http://vosegus.org/cgi/mt/mt-tb.cgi/343