.detach()メソッドについて

先日ライブラリのjsファイルを覗いていた際に見慣れないメソッドを見つけたので調べてみた。

機能

.remove()と似ているが、削除したDOM要素を保持することができる。
js.studio-kingdom.com

「detachの場合は関連付けられているjQueryの情報を削除後も保持します。」
つまりオブジェクトとして保持して後から再利用できる。

参考

qiita.com

非常に参考になる。
「いちいちDOM要素を作成しないので、動作が非常に速く」なるのも良い。

使い道

detachは「引き離す」という意味。
上記参考サイトにもある通り、削除というよりもDOM上で表示/非表示をコントロールしたいときに本領を発揮しそう。
他には、レスポンシブサイトで微妙にテキストのレイアウトが違う時とか地味に役立ちそう。

レイアウトが変わる時の対応

以前はHTMLに二つ書いて、cssで表示切り替えしたこともあるけどあまり好きではないし、よくないと思う。
かといってわざわざレンダリングに負荷かけるのも良い気持ちはしないが...。

こちらは以前、動かしたい要素基準でHTMLの中を移動させたコード。
構造にもよるけど処理の時間がかかると思う。

w = $(window).innerWidth();
function txt_switch(){
	$("動かしたい要素").each(function(){
		var tgt = $(this).siblings('追加したい先');
		if( w <= 767 ){
			$(tgt).after($(this));
		}else if( w > 767 ){
			$(tgt).before($(this));
		}
	});
}

上でイメージした、各HTML要素基準で内部の構造を入れ替えるコード。
とりあえず動いたけど、トラバース系メソッドも一回ちゃんとさらい直して挙動が早いコードを意識できるようにしたいと思った。

$(function(){
	w = $(window).innerWidth();
	var wrap = $('親要素');
	if( w <= 767 ){
		$(wrap).each(function(){
			var tgt = $(this).find('対象');
			var dest = $(this).find('追加先');
			var val = $(tgt).detach();
			$(dest).append(val);
		});
	}
});