あんまりやりたくないんだけどね。
あんまりやりたくない理由
jsとかの後付でhtml要素を追加したり削除したり、ついでに言えば位置を入れ替えることは、正直やりたくない。というのは、構築よりも修正とか管理のときにかなりしんどくなる。ブラウザの検証とかでないと動的な変化に気づけないから修正時に確認をしなきゃいけない箇所が増えて面倒なのと、どの条件で変化するのか把握する必要が出てきてとてもしんどい。ミスったらやばい。読み解くことに時間がかかることはロス感がめちゃくちゃ強い。
それに、要素を被せたり挿入すると「 > 」とか「 + 」とかでcssを組んでたものが崩壊するリスクもある。
なので、極力HTML要素はHTML上で完結したい。
jsによる動的な追加はスパム判定を受ける恐れ（アドブロックとかに弾かれる）とかあったりするんで、やっぱりあんまりやりたくない。
じゃあどこで使うか
にっちもさっちもいかない時だろうと。
たとえばどこぞのCMSとかを使って、フォーマットが決まっていてHTMLに手を入れられなくて、でも手を入れる必要がある。jsしか手段がない、とか。恒久的なもんじゃなくて一時的な措置としてやる、とか。
基本的には、めんどくさいからjsで入れちゃえ、というのは止めたほうがいい。
親要素の追加・削除
追加には.wrap()を使う。
<div class="A"><div class="B"><div class="C"></div></div></div>↑これを作りたくて、
↓HTML上はこの状態だとする。
<div class="C"></div>こんな感じで追加する。
//一つずつ追加
$('.C').wrap('<div class="B"></div>').wrap('<div class="A"></div>');
//まとめて追加
$('.C').wrap('<div class="A"><div class="B"></div></div>');見ての通りで、.wrap()は複数階層にも対応してる。指定はHTMLタグのベタ打ちなので「.」とか「#」での記述は不可。
逆に削除する場合は.unwrap()を使う。
$('.C').unwrap('.B').unwrap('.A');
$('.C').unwrap('.B , .A');こっちはHTMLタグでの指定じゃない。不思議。
条件分岐で追加と削除をする場合、変数とか配列でまとめられたら楽なんだけど、それぞれの指定の書式が異なるので整形する手間が発生する。だったらボリューム的にベタ打ちのほうが楽じゃない？ってこともある。めんどくさい。
コメント