デモページはこちら

jQueryのtextメソッドとhtmlメソッドで要素を取得または変更します。textメソッドとhtmlメソッドは機能が似ていますが細かい部分で異なります。

以下のhtmlの構造でテストします。liタグ内のspanタグはCSSで太字を適用しています。

<ul>
	<li>HTML・CSS</li>
	<li><span>Sass</span></li>
	<li>JavaScript</li>
</ul>
<p class="title">最初の要素を変更</p>
<input type="button" class="btn01" value="text">
<input type="button" class="btn02" value="html"><br><br>
<p class="title">2番目の要素を変更</p>
<input type="button" class="btn03" value="text">
<input type="button" class="btn04" value="html"><br><br>
<p class="title">最後の要素を変更</p>
<input type="button" class="btn05" value="text">
<input type="button" class="btn06" value="html"><br><br>
<input type="button" class="btn07" value="リロードしてリセット">

まず要素の取得です。対象の要素をtextメソッドとhtmlメソッドで取得して、それぞれconsole.logで出力します。対象の要素が複数ある場合、textメソッドはresult01のように全てのテキストを取得します。それに対しhtmlメソッドはresult02のように最初の1つのみ取得します。対象の要素にhtmlタグが含まれている場合、textメソッドはresult03のようにhtmlタグを無視してテキスト部分のみを取得します。それに対しhtmlメソッドはresult04のようにhtmlタグも含めて取得します。

$(function() {
	var result01 = $('ul li').text();
	var result02 = $('ul li').html();
	var result03 = $('ul li:nth-child(2)').text();
	var result04 = $('ul li:nth-child(2)').html();

	console.log(result01);
	console.log(result02);
	console.log(result03);
	console.log(result04);
});

//result01
HTML・CSSSassJavaScript
//result02
HTML・CSS
//result03
Sass
//result04
<span>Sass</span>

次に要素の変更です。最初の要素の変更はテキストのみの変更です。textメソッドとhtmlメソッドは同じ動作になります。
2番目の要素の変更は変更前の要素にhtmlタグが含まれますが、htmlタグとテキストはまとめて変更されます。こちらもtextメソッドとhtmlメソッドは同じ動作になります。
最後の要素の変更は変更後の要素にhtmlタグが含まれますが、textメソッドはhtmlタグを文字列として扱います。結果htmlメソッドのみ、htmlタグを反映した変更が可能です。

$(function() {
	$('.btn01').on('click', function() {
		$('ul').children('li:first').text('jQuery');
	});
	$('.btn02').on('click', function() {
		$('ul').children('li:first').html('jQuery');
	});
	$('.btn03').on('click', function() {
		$('ul').children('li:nth-child(2)').text('jQuery');
	});
	$('.btn04').on('click', function() {
		$('ul').children('li:nth-child(2)').html('jQuery');
	});
	$('.btn05').on('click', function() {
		$('ul').children('li:last').text('<span>jQuery</span>');
	});
	$('.btn06').on('click', function() {
		$('ul').children('li:last').html('<span>jQuery</span>');
	});
	$('.btn07').on('click', function() {
		location.reload();
	});
});