Insertion.Topクラス - Backstage of theater.js

【抜粋】
Insertion.Top = Class.create();
Insertion.Top.prototype = Object.extend(new Abstract.Insertion('afterBegin'), {
  initializeRange: function() {
    this.range.selectNodeContents(this.element);
    this.range.collapse(true);
  },

  insertContent: function(fragments) {
    fragments.reverse(false).each((function(fragment) {
      this.element.insertBefore(fragment, this.element.firstChild);
    }).bind(this));
  }
});

基準要素内の先頭に要素を挿入するクラスです。インスタンス作成時に処理が行われ、各メソッドは外部から使用されることはありません。

Abstract.Insertionクラスの引数に'afterBegin'を設定してインスタンスを生成、継承しています。

initializeRangeメソッド

this.rangeはRangeオブジェクトです。selectNodeContentsメソッドにより、基準要素を選択後、collapseメソッドで上に折りたたみます。これにより基準要素内の先頭を指すことができます。Mozilla系ブラウザでcreateContextualFragmentメソッドを使うための準備です。

insertContentメソッド

引数fragmentsが、挿入する要素オブジェクトを格納しているArrayオブジェクトなのは前述Insertion.Beforeクラスと同じです。これを一度reverseメソッドで逆順に並び替え*1、それから基準要素内の最初の子要素の直前に、順に挿入しています。

【例】
<html>
<head>
<title></title>
<style>
<!--
div, table, td{
  border:solid blue 2px;
  margin:5px;
  padding:5px;
}

-->
</style>
<script language="javascript" src="prototype.js" charset="utf-8"></script>
<script>
<!--
var counter = 0;
function test(){
  var blue = (255 - counter*20);
  blue = (blue < 0) ? 0 : blue;
  var color = "rgb(255, 255, " + blue + ")";
  var str = "<div>BBBB<div>" + counter + "</div></div>"
          + "<script>"
          + "$('test').style.backgroundColor = '" + color + "';"
          + "counter++;"
          + "</script>";

  new Insertion.Top('test', str); 
  new Insertion.Top('tbody', "<tr><td>ADD</td><td>" + counter + "</td></tr>"); 
}
//-->
</script>
</head>
<body>
<div id="test">AAAA</div>
<table>
<tbody id="tbody">
<tr><td>CELL</td><td>CELL</td></tr>
</tbody>
</table>
<button onclick="test();">TEST</button>
</body>
</html>

前述Insertion.Beforeクラスの例とほぼ同じですが、こちらはTESTボタンで基準要素内の先頭に追加します。また、tbody要素を対象として、テーブルの先頭へ行追加ができます。table要素ではないので注意してください。ただ、Operaでうまくいかないみたいです。詳しいことが分かったら追記します。*2

*1:reverseメソッドはオーバーライドされている。引数falseで元の配列を並び替える

*2:Operaではカウンタが上がらない不具合があります。Insertion.Beforeクラス - Backstage of theater.js参照