2012-12-27 1st

jsdoit.css

body { background-color: #DDDDDD; font: 30px sans-serif; }

jsdoit.html

<input type="button" onclick="addChildren()" value="Click me!">
<div id="parent">
</div>

jsdoit.js

function addChildren(){
    var parent = document.getElementById("parent"); // 一番外側のdiv要素
    var i = 0;
    while(i < 10){
        var child = document.createElement("p"); // a要素を追加するためのp要素を作成
        child.innerHTML = i + "番目の子供："; // p要素の文字を設定
        
        var link = document.createElement("a"); // a要素を作成
        link.innerHTML = "クリックして！"; // a要素のテキストを設定
        link.setAttribute("href", "#"); // href属性を設定
        link.setAttribute("id", "link_" + i); // id属性を設定
        link.onclick = clickHandler; // クリックイベントのハンドラを登録
        
        child.appendChild(link); // a要素をpに追加
        parent.appendChild(child); // p要素をdiv要素に追加
        i = i + 1;
    }
}

function clickHandler(event){
    var link = event.target;
    window.alert(link.getAttribute("id") + "がクリックされた！");
}