jQueryではhtml()メソッドで指定されたタグの内容を書き換えることが出来ます。html()の名前のとおりパラメータにはHTMLタグを含む文字列を指定することができます。以下のサンプルはボタンがクリックされるとpタグ内の文字を書き換えます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#btn").click(function(){
$("p").
html("文字が書き変わります");
});
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<form>
<input type="button" value="Click" id="btn">
</form>
<p>ここに注目</p>
</body>
</html>
html()は内容を全部書き換えてしまいますが、場合によっては文字列を追加したいこともあります。その場合にはhtml()の代わりにappend()を使います。以下のサンプルはボタンをクリックすると文字列が追加されます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#btn").click(function(){
$("p").
append("文字が追加されます。");
});
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<form>
<input type="button" value="Click" id="btn">
</form>
<p>ここに注目。</p>
</body>
</html>
タグの内容を消すこともできます。内容を消すにはremove()を使います。以下のサンプルはボタンをクリックすると段落の内容が削除されます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#btn").click(function(){
$("p").
remove();
});
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<form>
<input type="button" value="Click" id="btn">
</form>
<p>ここに注目。</p>
</body>
</html>
[
目次へ]
(2006.8.3)