- 2008-04-22 (火)
- 技術
prototype.jsのInsertionオブジェクトを使うと出力したい文字をElementオブジェクトの前とか後ろとかに自由に挿入できる。
Insertion.Top（Elementオブジェクトの最初に値を追加したい場合）
<div id="div1">あああ</div>
を
<div id="div1">いいいあああ</div>
にしたい場合は
new Insertion.Top("div1"," いいい");
Insertion.Bottom（Elementオブジェクトの末尾に値を追加したい場合）
<div id="div1">あああ</div>
を
<div id="div1">あああいいい</div>
にしたい場合は
new Insertion.Bottom("div1"," いいい");
これは結構使えそうです。
例えばGoogle Readerのようにある一定の場所までスクロールしたときに、AjaxでFeedを追加読み込みしたい場合はInsertion.Bottomで末尾に追加しちゃえばいい感じ。
Insertion.After（Elementオブジェクト終了タグの直後に値を追加したい場合）
<div id="div1">あああ</div>
を
<div id="div1">あああ</div>いいい
にしたい場合は
new Insertion.After("div1"," いいい");
Insertion.Before（Elementオブジェクト開始タグの直前に値を追加したい場合）
<div id="div1">あああ</div>
を
いいい<div id="div1">あああ</div>
にしたい場合は
new Insertion.Before("div1"," いいい");
続きでprototype.jsのどのあたりに上記内容が記述されているかを解説しています。
実際に定義されているのはprototype.js（ここでは1.6とする）の4005行目で、さらにElementオブジェクトのinsert処理を呼び出している。
var Insertion = {
Before: function(element, content) {
return Element.insert(element, {before:content});
},
Top: function(element, content) {
return Element.insert(element, {top:content});
},
Bottom: function(element, content) {
return Element.insert(element, {bottom:content});
},
After: function(element, content) {
return Element.insert(element, {after:content});
}
};
Element.insertメソッドの中では第2引数の連想配列一つ目の値を使ってどこにcontentを挿入するかを識別している。
prototype.jsでは1624行目あたり。
う～ん、このあたりはもう少し追う必要がありそうです。
勉強してきます！
【関連する記事】
- Newer: JavaScript用Unitテスト「JsUnit」を使ってみた
- Older: 大なり小なりってどっちがどっちだっけ？
Comments:0
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/986
- Listed below are links to weblogs that reference
- prototype.jsのInsertionオブジェクトを使うと簡単に要素に値を挿入できる from HouseTect, JavaScripter Blog
