JavaScriptで「innerHTML」で既存の内容をまるごと変える

プログラミング

最近JavaScrptで開発する事になったので、
JSを基本からじっくり勉強する事にしました。


今日は「innerHTML」と「document.getElementById()」で
HTML中に直接処理の結果を表示します。


HTMLの要素オブジェクトを指定するのには、
「document」オブジェクトの「getElementById()」メソッドを使います。
HTMLタグにid属性を使ってIDさえ付ければ、
どんな要素でも参照する事ができます。
そこで取得したオブジェクトの「innerHTML」プロパティに
表示するメッセージを代入すると、
HTML内に新しくデータを追加する事ができます。


コードはこんな感じになります。
元々表示しているidが「now」の文言を現在時刻に変えます。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<script language="Javascript">
<!--
var getTime = function() {
 
 // 現在時刻を取得
 var now   = new Date();
 var year  = now.getFullYear();
 var month = now.getMonth() + 1;
 var day   = now.getDate();
 var hh    = now.getHours();
 var mm    = now.getMinutes();
 
 var msg = "現在" + year + "年" + month + "月" + day + "日" + hh + "時" + mm + "分です。";
 
 document.getElementById("now").innerHTML = msg;
 
};

-->
</script>

<title>サンプル</title>
</head>
 <body>
  <form name="test">
   <input type="button" value="今、何時ですか？" onclick="getTime()">
  </form>
  <span id="now">現在時刻</span>
 </body>
</html>

 サンプル

これからは当分JSまみれで過ごしていきたいと思います。
しかしはてなダイアリーでスクリプトを直接埋め込む方法がいまいちわからないです。