要素を指定個数作成する

同じ種類の要素を指定個数作成する。
要素を作成

親要素.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>

要素を指定個数作成する

カテゴリー