jQueryでHTMLの書き換え！text・HTMLメソッド

今回は、jQueryでHTMLの操作方法、textメソッド・HTMLメソッドについて、詳しく記載していきます。

「jQueryでHTMLを書き換え？」なぜそんなことが必要なの？とお思いの初心者の方も多いことと思います。分かりやすく簡単に説明すると、よく見かけるjQueryを使ったスライダーなどは、jQueryによって動的に要素を書き換え、HTMLやtext自体はクリーンに保ったままイメージスライダーなども設置すこともできるので、理解しておくことをオススメいたします。

という事で、それでは今回はッ、

・テキストを書き換える:text()メソッド
・HTMLを書き換える:html()メソッド
・シングル？ダブルクォーテション使い分け！

上記について記載していこうと思います…。

テキストを書き換える:text()メソッド

text()メソッドは、要素の中のテキストを丸ごと書き換えるメソッドです。
それでは、早速サンプルのご紹介！

サンプルHTML<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#point1”).text(“テキストを丸ごと書き換えます。”);
});
</script>
</head>
<body>
・・省略・・
<h2 id=”point1″>text()メソッドとは？</h2>
・・省略・・
</body>

【表示例】

テキストを丸ごと書き換えます。

もともとHTMLソースに書かれたh2内のテキストは「text()メソッドとは？」でしたが、text()メソッドによって、「テキストを丸ごと書き換えます。」に変更されました。

書き換えられたHTML<h2 id=”point1″>テキストを丸ごと書き換えます。</h2>

また、「text()」とパラメータを空にすれば、テキストを「取得」することができます。

HTMLを書き換える:html()メソッド

html()メソッドを使えば、テキストだけでなくHTMLのマークアップごと書き換えることができます。

サンプルHTML2<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#point2”).html(‘<a href=”#”>HTMLのマークアップごと書き換えます。</a>’);
});
</script>
</head>
<body>
・・省略・・
<h2 id=”point2″><span>html()メソッドとは？</span></h2>
・・省略・・
</body>

【表示例】

HTMLのマークアップごと書き換えます。

HTMLでは、h2内はspan要素でマークアップされていました。
html()メソッドを利用して、a要素でのマークアップに書き換えています。

書き換えられたHTML<h2 id=”point2″><a href=”#”>HTMLのマークアップごと書き換えます。</a></h2>

また、「html()」とパラメータを空にすれば、HTMLを「取得」することができます。

text()やhtml()は、既存のHTMLを新しいものに書き換えるためのメソッドになります。

シングル？ダブルクォーテション使い分け！

サンプルHTML2では、html()メソッドを使ってa要素のマークアップを記述してみました。そしてhtml()メソッド内では、シングルクォーテションが使われていて、href属性の部分には、ダブルクォーテーションが使われています。

html( ‘<a href=”#”>HTMLのマークアップごと書き換えます。</a>’ );

上記のようにクォーテーションが入れ子になっている場合、もしすべてをダブルクォーテーション（またはシングルクォーテーション）で記述した場合、エラーになってしまいます。ダブルクォーテーションとシングルクォーテーションの使い分けが必要になるので注意が必要です。

という事で今回は、jQueryでHTMLの書き換え！text・HTMLメソッドについて、サンプルコードを交え記載しました。

使いどころがあまりないように思いますが、例えば、マウスオーバーでテキストを書き換えるや、HTMLのマークアップを書き換えるなど、実は覚えておくと非常に便利なメソッドだと思います。また、Webサイトでの表現方法の幅が広がり、他のメソッドにも応用が効くことと思いますので、しっかりと理解しておく必要があることと思います。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。