- WEBデザイン制作
- コーディング
HTML要素が一切触れない時にページを修正する方法
- [更新日]2020/11/19
- [公開日]2015/07/30
- 1451 view
- LLC JIRIKI inc.
暑いですね。今年は去年より暑いんじゃないか。というのを毎年言っている気がします。東京と岡山ではセミの数が違いますね。東京のセミの方が元気です。セミにも地方さがあるのでしょうか、同じ種類のセミでも鳴き方が違います。こういうどうでもいいことが気になってしまうくらい暑いです。
さて、今回はHTMLを修正しないでページのレイアウトや要素変更をするTipsです。あまり使うことは無いかもしれませんが軽微なA/Bテストを行う場合などには便利なやり方です。サイト制作時のフレームワークとして概念に持っておくと、結構役に立ちます。
このTipsを読んだ後は無性に
HTMLソース内にスクリプトを挿入するだけ
JQuery便利ですよね。今回のHTML要素の移動・追加にはJQueryを使用します。HTML内に直書きする場合を想定してご紹介していきましょう。
あれ、便利さが伝わりませんか。
$("#target").after("
");
このように全く新しいタグと要素を追加することも可能です。もちろん入れ替え、削除などもラクラク出来ます。
テキストが
ここに
あるよ
このようなHTMLの場合
$("#target").remove();
とすれば、
と消えますし、
$("#target").empty();
とすれば、
こうなるわけです。目的箇所の中身を消して、.appendなどで追加するなど様々な場面に応用できますね。このように入れ替え前提で考え出すと、一度しか使わないidなどを多用したくなりますのでご注意ください。
JQueryを使ってCSSをそこだけに反映させたり、liの最初だけを消したり、pタグの最初だけを消す、なんてことも出来ます。それはまたおいおいご紹介しましょう。
ご相談はこちらから
企画や要件が固まっていないご相談でも
お気軽にお問い合わせください。
-
01
相談する
-
02
要件ヒアリング
-
03
専門企業のご紹介
-
04
企業との
ご面談&見積取得 -
05
企業選定〜契約締結
サポート -
06
専門企業と直接
プロジェクト進行
※ステップ5以降はご希望に応じて
サポートいたします。
EDITOR PROFILE
LLC JIRIKI inc.
淵上 喜弘
LLC JIRIKI inc.
LLC JIRIKI inc.でできること
-
ホームページ・WEBサイト制作
-
SEO対策・サイトコンサルティング