IE6で親ノード以下をまとめてremoveChildするとバグる

IE6のjavascriptで
とある処理でバグったという話です。

こういうHTMLを書いて

<table id="tbl"></table>

適当なイベントハンドラへ以下を記述し

var table = document.getElementById("tbl");
// table要素にtbody要素が所属していれば削除
// tbodyに所属しているtrも一緒に削除する
var tbody = table.getElementsByTagName("tbody");
if (tbody.length > 0) table.removeChild(tbody[0]);
// table要素にtbody要素とtr要素を所属させる
var newTbody = document.createElement("tbody");
table.appendChild(newTbody);
for (var i = 0; i < 100; i++) {
var tr = document.createElement("tr");
newTbody.appendChild(tr);
};

ひたすらイベントを連打連打！

すると
「問題が発生したため、IEXPLORE.EXE を終了します。うんぬん」
が出て、IEが不正終了します。

対策として、末端のtr要素から削除してゆくと不正終了は起こらなくなりました。
また、FireFoxはこの現象は起こりませんでした。
本来やっちゃいけないのかなんでこうなるのか等、詳細はよくわかりません。

解決において、Ajaxにおけるメモリリークの注意点というエントリの
「3. 動的なDOMノードの作成後に親ノードに紐付ける順番」がヒントになりました。多謝。

2.0hハマり・・・。