今回は、jQuery場所を選んでHTMLを追加する書き方について、詳しく記載してみようと思います。
「jQueryを使うとHTMLを追加することができるの？」や「HTMLを追加する場所ってどういう書き方？」とお思いの初心者の方も多いことと思います。今回の内容では、適切なメソッドを選んで、思った所に指定したHTMLが追加できるようになることと思います。
という事で、それでは今回はッ、
上記について記載していこうと思います...。
指定した場所にHTMLを追加するメソッドの書き方を記載していきます。 追加する場所を適格に指定して、適切なメソッドを選べば、思った所に指定したHTMLを追加することが可能になります。
まず初めにprepend()メソッド、こちらは指定した要素の中の先頭にHTMLを追加するメソッドになります。さっそくサンプルを記載してみます。
HTMLでは、リスト内には「HTML」と「CSS」という2つしか記述されていませんが、prepend()メソッドでol要素内の先頭に、<li>jQuery</li>を追加しています。
append()メソッドは、prepend()メソッドの逆で、先頭ではなく最後に追加するためのメソッドになります。
上記のように、一番最後に要素が追加されることになります。また、HTMLも同様でリストの最後に追加されることとなります。
集客に強いホームページ制作サービス概要を見る
売上UPに特化したスタンダードプランの詳細を見る
prepend()は、指定した要素内の一番初めに追加するメソッドでしたが、before()メソッドは、指定した要素の前に追加するメソッドです。
HTMLソースのol要素の前に、h2要素を追加しました。
after()メソッドは、before()メソッドの逆で、指定した要素の後ろに追加するメソッドです。
jQueryのメソッドをもっと詳しく！
HTMLソースのol要素の後ろに、p要素を追加しました。
wrap()メソッドを使うと、要素を新たな要素で包み込むことができます。
HTMLソースのol要素をdiv要素で包んでみました。 wrap()メソッドでは、包みたい要素を<div></div>のように、空で記述します。
remove()メソッドを使うと、要素自体を削除することができます。
3つあったli要素が削除されて2つになっています。
という事で今回は、jQuery場所を選んでHTMLを追加する書き方につきまして、サンプルコードを交え記載してみました。
比較的簡単な内容でしたが、理解するのは簡単ですが、覚えるとなると使用頻度が少ないため難しいことと思います。また、覚える必要もないかもしれませんが、まれにjQueryのプラグインを少しカスタマイズする際など使用することがございます。なので、使用方法の理解だけはしっかりとておくことをオススメします。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
最新の成功事例 制作実績一覧はこちら
他社との違いMK-Designが選ばれる理由を見る
