第14回 htmlの制御 jQueryによるJavaScript入門

こんにちは。to-Rの西畑です。jQueryによるJavaScript入門、14回目はhtmlの制御を行ってみたいと思います。

まずはサンプルをご覧ください。

上のリストをクリックすれば、下のリストが変更されると言うサンプルです。
(いまいちなサンプルですみません。htmlだけで表現するには少し限界が。。。)

JavaScript

$(function(){
	$(".click li").click(function(){
		$(".target li").html($(this).html());
		return false;
	})
});

html

<ul class="click">
	<li><a href="img/pencil.jpg">鉛筆</a></li>
	<li><a href="img/paints.jpg">絵の具</a></li>
	<li><a href="img/ageha.jpg">アゲハ</a></li>
	<li><a href="img/cat.jpg">猫</a></li>
</ul>
<ul class="target">
	<li><a href="img/pencil.jpg">鉛筆</a></li>
</ul>

jQueryでhtmlの制御

htmlの取得

$(セレクタ).html()

指定した要素内のhtmlを取得する命令です。

$(this).html()

サンプルではクリックした要素内のhtmlを取得しています。

htmlの変更

$(セレクタ).html("変更後のhtml")

指定した要素内のhtmlを変更する命令です。

$(".target li").html($(this).html());

サンプルではクリックした要素内のhtmlを下のulリストと差し替えています。

textとの違い

textとほぼ同じような構文ですが、違いはtextがhtmlを取り扱うことが出来ない点です。

html要素をtextを利用して変更した場合

$(".target li").text($(this).html());

サンプル

html要素をtextを利用して取得した場合

$(".target li").html($(this).text());

サンプル

【PR】現場のプロから学ぶXHTML+CSS 好評発売中

コメントをどうぞ

トラックバック URL

トラックバック