こんにちは。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()); |