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

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

  insertContent: function(fragments) {
    fragments.each((function(fragment) {
      this.element.appendChild(fragment);
    }).bind(this));
  }
});

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

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

initializeRangeメソッド

this.rangeはRangeオブジェクトです。selectNodeContentsメソッドにより、基準要素を選択後、collapseメソッドで下に折りたたみます・・・ってあれ？参考サイト「This Document has Moved」を見ると引数はfalseにすべきな気が・・・。要素でも同じ効果なんでしょうか。分かりません＞＜；

とにかく、基準要素内の末尾を指しているのだろうと思います＾＾； Mozilla系ブラウザでcreateContextualFragmentメソッドを使うための準備です。

insertContentメソッド

引数fragmentsが、挿入する要素オブジェクトを格納しているArrayオブジェクトなのは前述Insertion.Beforeクラスと同じです。これをappendChildメソッドで順に追加しています。

【例】
<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.Bottom('test', str); 
  new Insertion.Bottom('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.Topの例をInsertion.Bottomに変えただけです＾＾；*1

tbody要素を対象として、テーブルの末尾へ行追加ができます。table要素ではないので注意してください。ただ、Operaでうまくいかないみたいです。詳しいことが分かったら追記します。

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