ある要素の子の一部を兄弟にしたいのだ

JavaScript DOM

ある要素に含まれるテキストの一部が選択されている場合、選択されているテキストのみ、その要素に含まれないようにしたいなと思って色々試行錯誤しています。

ちょっと言葉で説明するのが難しいのですが、

<strong>えびはらこうすけ</strong>

というのがあって、このうちの「はらこう」のみが選択されている場合、

<strong>えび</strong>はらこう<strong>すけ</strong>

という風にしたいのです。

ということで DOM Range を使って試してみたのが以下のサンプルです。たぶん Firefox でしか動かないんじゃないかと思いますが。
http://co3k.org/sample/domRange.html

サンプルの流れをざっくり説明すると、

1. テキストを選択する

<strong>えび[はらこう]すけ</strong>

2. 選択したテキストを、（元）親ノードの直前に移動する

[はらこう]<strong>えびすけ</strong>

3. 移動したテキストの直前に（元）親ノードと同じ名前を持つ兄弟ノードを作成する

<strong></strong>はらこう<strong>えびすけ</strong>

4. （元）兄弟ノードのうち、移動したテキストの直前にあったものを選択する

<strong></strong>はらこう<strong>[えび]すけ</strong>

5. 選択したテキストを新しく作った兄弟ノードに移動する

<strong>[えび]</strong>はらこう<strong>すけ</strong>

てな感じになります。

ただなんか強引なんだよなぁ。もうちょっとうまい手があるのではないか。
あとこれだと、選択しているテキストが入れ子になっていたり、始点と終点がそれぞれ別ノードにあったりするとちょっと色々困ったことになる。

いやあ難しいわ。 IE は IE で DOM Range が使えないから Text Range でなんとかするしかないし（できるのか？）。