同じ種類の要素を指定個数作成する。
親要素.appendChild(element);で作成。appendChildは子要素の最後に追加する。
<!DOCTYPE html>
<html lang="UTF-8">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>要素の作成</title>
<style>
#wrapper{width: 380px;}
dt{background: lightblue; padding:4px; margin-top:8px;}
dd{margin:2px;}
</style>
<script type="text/javascript">
var count = 0;
function addElement() {
alert("count=" + count);
var element = document.createElement('div');
element.id = "btn_"+count;
element.innerHTML = "要素"+count;
element.style.backgroundColor = 'blue';
element.style.padding = "5px";
element.style.margin = "5px";
var achEle = document.getElementById("anchor");
achEle.appendChild(element);
// body要素にdivエレメントを追加
count++;
}
</script>
</head>
<body>
<div id="wrapper">
<h1>elementの作成</h1>
<input type="button" style="margin:5px;" onclick="addElement()" value="要素を追加">
<div id="anchor">以下に要素を作成</div>
</div>
</body>
</html>