今回は、jQueryでHTMLの操作方法、textメソッド・HTMLメソッドについて、詳しく記載していきます。
「jQueryでHTMLを書き換え？」なぜそんなことが必要なの？とお思いの初心者の方も多いことと思います。分かりやすく簡単に説明すると、よく見かけるjQueryを使ったスライダーなどは、jQueryによって動的に要素を書き換え、HTMLやtext自体はクリーンに保ったままイメージスライダーなども設置すこともできるので、理解しておくことをオススメいたします。
という事で、それでは今回はッ、
上記について記載していこうと思います...。
text()メソッドは、要素の中のテキストを丸ごと書き換えるメソッドです。
それでは、早速サンプルのご紹介！
もともとHTMLソースに書かれたh2内のテキストは「text()メソッドとは？」でしたが、text()メソッドによって、「テキストを丸ごと書き換えます。」に変更されました。
また、「text()」とパラメータを空にすれば、テキストを「取得」することができます。
html()メソッドを使えば、テキストだけでなくHTMLのマークアップごと書き換えることができます。
HTMLでは、h2内はspan要素でマークアップされていました。
html()メソッドを利用して、a要素でのマークアップに書き換えています。
また、「html()」とパラメータを空にすれば、HTMLを「取得」することができます。
text()やhtml()は、既存のHTMLを新しいものに書き換えるためのメソッドになります。
サンプルHTML2では、html()メソッドを使ってa要素のマークアップを記述してみました。そしてhtml()メソッド内では、シングルクォーテションが使われていて、href属性の部分には、ダブルクォーテーションが使われています。
上記のようにクォーテーションが入れ子になっている場合、もしすべてをダブルクォーテーション（またはシングルクォーテーション）で記述した場合、エラーになってしまいます。ダブルクォーテーションとシングルクォーテーションの使い分けが必要になるので注意が必要です。
という事で今回は、jQueryでHTMLの書き換え！text・HTMLメソッドについて、サンプルコードを交え記載しました。
使いどころがあまりないように思いますが、例えば、マウスオーバーでテキストを書き換えるや、HTMLのマークアップを書き換えるなど、実は覚えておくと非常に便利なメソッドだと思います。また、Webサイトでの表現方法の幅が広がり、他のメソッドにも応用が効くことと思いますので、しっかりと理解しておく必要があることと思います。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
