ここでは、ｊQuery の html 関数を使って要素（タグ）の内容を書き換えるサンプルコードを掲載しています。
スポンサーリンク
サンプルで使用するHTML
本サンプルでは以下の html 文書を使用しています。input ボタンをクリックするとテーブルの内容がまるっと置き換わります。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- jQuery ライブラリの読み込み -->
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<!-- 今回のサンプルコード -->
<script type="text/javascript" src="test.js"></script>
<title>jQueryテスト - タグ内の内容を入れ替えるサンプル</title>
</head>
<body>
<!-- このボタンをクリックすると下記DIVタグ内容が入れ替わる -->
<input id="bid" type="button" value="DIVタグ内の内容を入れ替える" />
<div id="did">
<table>
<tr>
<th>名前</th>
<th>好きな色</th>
<th>嫌いな果物</th>
</tr>
<tr>
<td>斉藤</td>
<td>赤</td>
<td>りんご</td>
</tr>
<tr>
<td>悟</td>
<td>赤</td>
<td>なし</td>
</tr>
<tr>
<td>スネ夫</td>
<td>緑</td>
<td>バナナ</td>
</tr>
</table>
</div>
</body>
</html>
Javascript ( test.js )
次は Javascript のサンプルになります。上記 HTML 文書で読み込んでいる test.js にあたります。詳細はサンプル内のコメントを参照ください。
$(function () {
/*
* inputボタンがクリックされた時のイベントハンドラ―を追加する
*/
$("input#bid").click(function(){
/*
* DIVタグの内容をすべて出力する（参考）
*/
alert($("div#did").html());
/*
* DIVタグ内の内容をすべて入れ替える
*/
var html = "<div>書き変わりましたか？</div>";
$("div#did").html(html);
/*
* 書き変わった後の内容を確認する
*/
alert($("div#did").html());
});
});