Web Developer's Room
HOME > DHTML講座 > ドキュメントを動的に変更する(3)     

ドキュメントを動的に変更する(3)

innerHTMLで、HTMLタグを組み合わせたものを動的に変更します。

<html>
<body>

<script language="Javascript">
function Click_Sub1() {
  document.all.div1.innerHTML="<table border=1><tr><td>サンプル1<tr><td>サンプル2<tr><td>サンプル3</table>";
}
function Click_Sub2() {
  document.all.div1.innerHTML="<table border=1><tr><td>非表示</td></tr></table>";
}
</script>

<input type="button" onclick="Click_Sub1()" value="表示">
<input type="button" onclick="Click_Sub2()" value="非表示">
<div id=div1>初期状態です。</div>

</body>
</html>
【説明】
innerHTMLでdiv1にHTMLを送ります。
表示をクリックすると、div1を動的に変更します。
非表示をクリックすると、div1を動的に変更します。

 サンプル

関連リンク
  • DHTMLとは
  • DHTMLの基本
  • DHTMLで使用できるイベント
  • ドキュメントを動的に変更する(1)
  • ドキュメントを動的に変更する(2)
  • ドキュメントを動的に変更する(4)





  • (C) Web Developer's Room All rights reserved.