ボタンの個数やボタンのキャプション文字列があらかじめ決まっている場合は、HTMLにボタンのコードを記述しておき、
CSSの表示切替でボタンを表示させる方法もあります。
CSSによる要素の表示、非表示の切り替えはこちらの記事を参照してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function Exec() {
var elem = document.getElementById("OutFrame");
htmltext = '';
for (i = 1; i < 6; i++) {
caption = "ボタン" + i;
htmltext += '<input type="button" value='+caption+'></input> ';
}
elem.innerHTML = htmltext;
}
</script>
</head>
<body>
<h2>JavaScriptによるボタンの動的生成</h2>
<a href="javascript:Exec();">クリックで実行</a>
<hr />
<div id="OutFrame">
</div>
</body>
</html>
Exec()
関数を呼び出して実行します。 <a href="javascript:Exec();">クリックで実行</a>
getElementById()
メソッドを呼び出し、id="OutFrame" の要素を取得し、elem変数に格納します。 function Exec() {
var elem = document.getElementById("OutFrame");
htmltext = '';
for (i = 1; i < 6; i++) {
caption = "ボタン" + i;
htmltext += '<input type="button" value='+caption+'></input> ';
}
elem.innerHTML = htmltext;
}
for (i = 1; i < 6; i++) {
caption = "ボタン" + i;
elem.innerHTML += '<input type="button" value='+caption+'></input> ';
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function Exec() {
var elem = document.getElementById("OutFrame");
for (i = 1; i < 6; i++) {
caption = "ボタン" + i;
elem.insertAdjacentHTML('beforeend', '<input type="button" value=' + caption + '></input> ');
}
}
</script>
</head>
<body>
<h2>JavaScriptによるボタンの動的生成</h2>
<a href="javascript:Exec();">クリックで実行</a>
<hr />
<div id="OutFrame">
</div>
</body>
</html>