JQueryでHTML要素を変更するTips

2015.8.3

tedumari

HTMLソースを編集することが出来ない案件で、サイトのレイアウトを変更したい。そんな時どうしますか。「HTMLさわれないなら何も出来ないじゃないか！」というのはある種間違いです。サイト構築の際にも後から編集を考えるいいきっかけにもなると思いますから是非今回の技を身につけておきましょう。

今日から使えるJQueryのテクニック

Jqueryでコンテンツを移動させる

さて、早速いきましょう。

HTMLソース内にスクリプトを書く、もしくは外部に.jsファイルを置いて読み込ませる。ただそれだけです。HTML自体には加工を加えずにコンテンツの移動や追加などが出来るようになります。

<script type="text/javascript">
$(function() {
     alert("「#target」を #contents の要素の内側先頭に移動。");
$("#target").prependTo("#contents");
　   alert("「#target」を #contents の要素の内側末尾に移動。");
$("#target").appendTo("#contents");
　   alert("「#target」を #contents の要素の外側直前に移動。");
$("#target").insertBefore("#contents");
　   alert("「#target」を #contents の要素の外側直後に移動。");
$("#target").insertAfter("#contents");
})
</script>

この4種類を覚えておくだけでもかなり役に立ちますね。　.insertBeforeメソッド、.insertAfterメソッドはかなり便利です。実際にHTMLを書いて移動させてみるとその便利さが実感できるはずです。JQueryだけで、編集するHTMLソースに変更を加えませんから、ちょっとしたテストページを作成するときも便利ですね。このコンテンツが上のほうがいいのか、下のほうがいいのか。サイドメニューは右がいいか左がいいかなども楽チン編集可能です。

$("#target").after("<div class=\"text-bold\">新しいテキスト</div>");

.afterメソッドも同様に使い勝手抜群です。タグの追加まで出来ますから、cssも新しく追加することが出来ます。

$('.foo').css('color','red');

.foo というClassをもった箇所にだけCSSでフォントカラーレッドを適用する例です。.cssメソッドに関してはまた後日詳しく取り上げましょう。

JQueryでコンテンツの要素を空っぽにすることも可能です。

<body>
   <div id="target">
     <p>テキストが</p>
     <p>ここに</p>
     <p>あるよ</p>
   </div>
</body>

一般的に良くありそうな構造を例にあげてみました。メソッドによって処理の中身が異なりますので説明していきましょう。

$("#target").remove();

.remove メソッドを使うと

<body>

</body>

指定したidごとごっそり削除されます。

$("#target").empty();

.empty メソッドを使えば、

<body>
   <div id="target">

   </div>
</body>

idの中身だけ消えるわけですね。

こういう便利さを知ると、HTMLを書く時点でidやclass名を意識するようになるはずです。可読性が高く、後からのメンテナンス性の高い。つまり汎用性・拡張性のあるHTMLを書くようにしていくことが理想ですね。