Blog

JQueryでHTML要素を変更するTips

2015.08.03 | jQuery | 399views


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を書くようにしていくことが理想ですね。

このエントリーが役に立ったらシェアしてください


LLC JIRIKI HOME

この記事を書いた人

淵上 喜弘

著者:LLC JIRIKI

合同会社ジリキ 代表社員兼、業務執行社員。
1979年生まれ 兵庫県尼崎市出身・明石市育ち。

川崎医療福祉大学を卒業後、日産サティオ岡山に就職し初年度新人賞をカルロス・ゴーンCEOより受賞。その後NTT関連フレッツ販売会社に再就職し、地域賞2位を受賞。OCN販売表彰2位も同時受賞するとともにBフレッツ単独販売数の記録を打ち立てる。2006年合同会社ジリキ設立。SEO、WEBサイト制作業を開始する。

SEOで「大阪 探偵」や「離婚 行政書士」などのキーワードや「子ども 教材」「スマートフォンケース」など各種キーワードで1位を獲得。サイト制作でも毎日コミュニケーションズ・マイナビ女子オープンのサイトを制作。その後ECサイト運営サポートに着手し、売上月商50万のストアを1年半で1700万の月商に成長させる。

スマートフォンケースなどの商品企画開発も手がけ、楽天ランキングでも1位獲得、家電ジャンルMVPなどECサイトコンサルティングでも実績あり。

現在、グロースハックに注力しており様々な業種のサイトのCVアップをサポート中。チームとしてのグロースハック実績ではKaizenグロースハッカー総合 Top 20%、不動産 Top 10などを頂いています。

プログラミングは本業ではなくあくまでも趣味の一環として取り組んでいます。月1回ペースで東京へ出張へ行っておりますので、機会があれば是非お話をしましょう。

LLC JIRIKI