JavaScriptでDOMの要素置換を行う

| | コメント(0) | トラックバック(0) この記事をはてなブックマークに追加

 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 );
 }

出来てしまえばこんなもんだよね。なかなかエレガントなんではないでしょうか? このくらい当たり前?

関数の使い方は、swap_element の引数ふたつにそれぞれ入れ替えたい要素を渡すだけ。要素の指定は document.getElementBy** 系で取得すれば良いでしょう。

処理ですが、入れ替える要素を子要素を含めて複製します。
元の要素の親要素に対して子要素(つまり元の要素)の置換を行います。置換後の要素は子要素を含めて複製したものです。
要素の複製時に、置換対象として指定されたふたつの要素が同時にスタックに積まれることになるので、メモリを贅沢に使ってるといえるかな? とはいえ超巨大な要素置換でもしないかぎり問題にはならないでしょう。
念のため言っておくと親子関係の整合性は当然呼び出し側で考えないとダメですよ。
あと、ieとfirefox3で動作することを確認しただけのゼロデバッグのコードであることを付け加えておきます。もし使いますって方がいたらそこだけご注意を。4行だけどね。

そんな感じです。
よしなに。

トラックバック(0)

このブログ記事を参照しているブログ一覧: JavaScriptでDOMの要素置換を行う

このブログ記事に対するトラックバックURL: http://www.studio-wiz.com/mt/mt-tb.cgi/70

コメントする

このブログ記事について

このページは、マピロが2008年11月12日 14:25に書いたブログ記事です。

ひとつ前のブログ記事は「今週の『かもめ☆チャンス』『ラストイニング』『ココナッツピリオド』『日本沈没』」です。

次のブログ記事は「今週の『ハチワンダイバー』『ひまわりっ』『特上カバチ』『リアル』」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ

Powered by Movable Type 4.14