--/-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

05/30 2010

最初の子要素を追加するDOMメソッド

jQueryなどのライブラリーにより、ほとんど意識しなくなりつつあるDOM(Document Object Model)ですが、基本を押さえておくことはやはり重要ですね。

ある要素の子要素を追加する、しかも最初の子要素として追加する場合、jQueryならば「$(要素).prepend(子要素)」となります。
<body>
    <p>文章1</p>
  <p>文章2</p>
</body>
例えば、上記のHTMLの中のBodyタグ直下に「<h1>タイトル</h1>」という要素を追加したい場合、jQueryでは以下のように記します。
$(document.body).prepend('<h1>タイトル</h1>')
そうすると以下のようにHTMLはダイナミックに変わります。
<body>
  <h1>タイトル</h1>
    <p>文章1</p>
  <p>文章2</p>
</body>
 jQueryなどのライブラリーを使わない場合、「子要素を追加する」というのはちょっとした工夫が必要です。といいますのも、DOMそのものには子要素(子ノード)を一番最後に追加する「appendChild」はあるのですが、一番最初に追加する「prependChild」というメソッドがないからです。ではその方法は・・・

insertBefore()メソッドを使用する!

var parentObject = document.getElementsByTagName("body")[0];
var childObject  = document.createElement("div");
childObject.innerText="タイトル";
parentObject.insertBefore(childObject,parentObject.firstChild);
 このDOMで先程のjQueryと同じ動きをします。日本語に訳すると「親要素(parentObject)内の最初の子要素(firstChild)の前に、新しい子要素(childObject)を挿入する(insertBefore)」ということ。

 jQueryのライブラリーは本当に便利だなあ、と思う一方で、基本を押さえる重要さも覚える今日この頃でした。


blog comments powered by Disqus
このページのTOPへ
聖書リスニング
DTメンバー募集(無料!)

Devotion Timeのメルマガメンバーになりませんか!メンバー限定企画もあり!ご希望の方はメールアドレスを入力して下さい。(さらに詳しく >>)

Profile

ブロガー: 西原智彦
1972年広島生まれ。ロボットが好きで工学修士に(1996)。聖書に惚れ込み、実践神学修士に(2005)。(さらに詳しく >>)

カテゴリ
お問い合わせフォーム

個人的な感想、ご質問にどうぞ

お名前(ハンドルネームOKです):
メールアドレス:
件名:
本文:

Copyright © Devotion Time All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。