jQuery – HTML文字列を取得・変更する『 html() 』

要素内にあるHTML文字列(HTMLタグが含まれた文字列)を取得・変更する場合は「html()」を使います。

取得する場合は「html()」、変更する場合は「html(”変更後の文字列”)」を指定します。

//id=msg内のHTML文字列を取得します。
$("#msg").html();
//id=msg内のHTML文字列を変更します。
$("#msg").html("<p>文字を変更しました。</p>");

HTML要素が含まれている場合、HTMLタグも扱うことができます。
「text()」と動きが似ていますが、text()の場合はHTMLタグは文字として解釈されます。下記サンプルで両方を用意したので動作を試してみて下さい。

jQuery – html サンプル

また「html()」を使うとき、「 "(ダブルクオート)」に注意して下さい。
例えば下記のように書くとエラーになります。

$("#msg").html("<p class="msg">文字を変更しました。</p>");

これは「 "(ダブルクォート)」で挟んだものが「文字列」として認識されるため、「"msg"」のところで一旦区切れてしまい、それ以下の記述がJavascriptのルールから外れてしまうからです。

そこでこれを回避するために、全体を「 ‘(シングルクォート)」で囲みます。

//中に「 "(ダブルクォート)」がある場合は「 '(シングルクォート)」で囲みます。
$("#msg").html('<p class="msg">文字を変更しました。</p>');

「 ‘(シングルクオート)」で囲むとその中にある「 "(ダブルクォート)」を文字列として扱ってくれるようになります。

自分自身、基本は「 "(ダブルクォート)」を利用するので、上記のような場合「 ‘(シングルクォート)」に変え忘れてしまうことがあります…。注意しましょう。