jQueryでボタンが押されるとHTMLソースコードが変更されるスクリプトを作ってみよう
HTMLソースが変更されるスクリプト
今回は、jQuery を使用してボタンが押されると HTML ソースコードが変更されるスクリプトを作ってみます。
実行結果
サンプル
BUTTON
jQuery + JavaScript
jQuery を使って「botan1」という id をもった <div> 要素がクリックされた時に、「moji」という id をもった要素の HTML（<div id="moji">変更される部分</div>）が、「ゴルフ」というテキストに置き換わる処理になっています。
また、このスクリプトでは文字列を「Htmlソース」として出力しているので、HTMLタグはタグとして認識されて即時デザインに反映されます。
なお、「click」イベントはあらかじめ認識させる必要があるため、$(function){ }); の中に入れてページが読み込まれると同時に読ませています。
$(function(){
$("#botan1").click(function(){
$("#moji").html("<span style='font-size:36px;color:red'>ゴルフ</span>");
});
});
CSS
「#botan」はボタンのスタイルを設定しています。「#botan:hover」ではマウスポインターがボタンの上に乗った時にマウスポインターを「手の形」になるようにしています。
<style type="text/css">
<!--
#botan1 {
font-size: 12px;
color: #000;
background-color: #CCC;
text-align: center;
width: 100px;
padding: 3px;
margin-bottom: 10px;
}
#botan1:hover {
cursor: pointer;
}
-->
</style>
HTML
ボタン用のタグと、文字を表示する場所のタグが必要になります。（※ソースコード中の下線は無視してください）
<div id="botan1">BUTTON</div>
<div id="moji">フォルクスワーゲン</div>
END
