エレメントを作成する

説明

エレメントを生成するにはdocument.createElement()を使います。パラメータに生成するタグ名を指定します。エレメントを生成しただけではページ上には表示されないので、ページ上のノードに連結する必要があります。
サンプルでは現在の時刻を表示するため<span>タグを生成し内容として設定後、<div>タグで指定された領域の末尾に追加しています。

　詳しい解説などはJavaScriptテクニックブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>エレメントを作成する</h1>
<form action="./mknode.cgi" method="get" name="mainForm">
<input type="button" id="createButton" value="spanエレメントを生成"><br>
</form>
<div id="result"></div>
</body>
</html>

window.onload = function(){
document.getElementById("createButton").onclick = function(){
var dateObj = new Date();
var h = dateObj.getHours();
var m = dateObj.getMinutes();
var s = dateObj.getSeconds();
var brTag = document.createElement("br");
var spanTag = document.createElement("span");
spanTag.className = "note";
spanTag.innerHTML = h+"時"+m+"分"+s+"秒";
document.getElementById("result").appendChild(spanTag);
document.getElementById("result").appendChild(brTag);
}
}