Javascriptライブラリ「prototype.js」のinsertメソッドの簡単なテスト。
以下のような単純なファイルがあったとしてその中のid"div1"に対してそれぞれ値を変えながらinsertを呼び出してみる。
<body> <div id="div1">基準要素</div> </body>
まずは
$('div1').insert("DIV内の最後に挿入");
を実行。
実行後の状態は
<body> <div id="div1">基準要素DIV内の最後に挿入</div> </body>
文字列が追加されただけだ。これがデフォルトの動作になる。
次
$('div1').insert({top: "DIV内の最初に挿入"});
を実行。引数をオブジェクトにし、キー（プロパティ名）で挿入したい場所を指定する。"top"とした時は"要素内の最初"になるようだ。
HTMLは
<div id="div1">DIV内の最初に挿入基準要素DIV内の最後に挿入</div>
と、こうなっている。
さらに
$('div1').insert({before: "DIVの前に挿入"});
を実行。
HTMLは
<body> DIVの前に挿入 <div id="div1">DIV内の最初に挿入基準要素DIV内の最後に挿入</div> </body>
こうなる。
キーに"before"を指定したら要素の前に挿入される。
では、最後に"after"を指定してみる。結果は想像できるが
<body> DIVの前に挿入 <div id="div1">DIV内の最初に挿入基準要素DIV内の最後に挿入</div> DIVの後ろに挿入 </body>
と、こうなる訳だ。
ちなみにデフォルトの動作をあえて引数をオブジェクトにして書くと
$('div1').insert({bottom: "DIV内の最後に挿入"});
こんな感じで、キーは"bottom"になる。
さらに引数をオブジェクトにした場合は1度に4つの位置に挿入できる。
こんな風に
$('div1').insert({top: "DIV内の最初に挿入", after: "DIVの後ろに挿入", before: "DIVの前に挿入", bottom: "DIV内の最後に挿入"});
結果はさっきと全く同じHTMLになっている。
もちろん値（プロパティ値）は単純な文字列だけではなくタグで囲った文字列も挿入できる。
カテゴリ：
トラックバック(0)
トラックバックURL: http://blog.beanz-net.jp/beanz_mtos/mt-tb.cgi/17
コメントする