htmlを動的に書き換えたい場合、要素を入れ替えなければならない場面が多々あります。
その際、子要素をまるごと入れ替えられなければ、たとえばテーブルの行をソートしたい、とかいうありがちなケースに対応できません。
でまあ簡単にできないかなあとググったりしてたんですがどうにも見つからない。ライブラリで提供してるとこはいくつかあるんだけどそれだけのために中身を読んでない他人のコードをincludeしたくないんですよね。無駄なこだわりですけど。
仕方ないんでいろいろと試行錯誤してたんですが、あらら4行でやれちゃいました。関数にしたら6行になったけど。
これ。
function swap_element(ele_A, ele_B){
var swap_ele_A = ele_A.cloneNode(true);
var swap_ele_B = ele_B.cloneNode(true);
ele_A.parentNode.replaceChild( swap_ele_B, ele_A );
ele_B.parentNode.replaceChild( swap_ele_A, ele_B );
}
var swap_ele_A = ele_A.cloneNode(true);
var swap_ele_B = ele_B.cloneNode(true);
ele_A.parentNode.replaceChild( swap_ele_B, ele_A );
ele_B.parentNode.replaceChild( swap_ele_A, ele_B );
}
出来てしまえばこんなもんだよね。なかなかエレガントなんではないでしょうか？ このくらい当たり前？
関数の使い方は、swap_element の引数ふたつにそれぞれ入れ替えたい要素を渡すだけ。要素の指定は document.getElementBy** 系で取得すれば良いでしょう。
処理ですが、入れ替える要素を子要素を含めて複製します。
元の要素の親要素に対して子要素（つまり元の要素）の置換を行います。置換後の要素は子要素を含めて複製したものです。
要素の複製時に、置換対象として指定されたふたつの要素が同時にスタックに積まれることになるので、メモリを贅沢に使ってるといえるかな？ とはいえ超巨大な要素置換でもしないかぎり問題にはならないでしょう。
念のため言っておくと親子関係の整合性は当然呼び出し側で考えないとダメですよ。
あと、ieとfirefox3で動作することを確認しただけのゼロデバッグのコードであることを付け加えておきます。もし使いますって方がいたらそこだけご注意を。4行だけどね。
そんな感じです。
よしなに。
コメントする