事件停止射擊父修改

Question

我試圖做一個簡單的事情之後，這是我的html：

<div id="div1"> 
    <a id="first" href="#">First</a> 
</div> 

，這是我的JS腳本

var div1 = document.getElementById("div1"); 
var first = document.getElementById("first"); 

first.addEventListener("click", function(e){ 
    alert("Hello"); 
    div1.innerHTML = div1.innerHTML + '<a id="second" href="#">Second</a>'; 
}, false); 

當我在＃點擊第一個鏈接第二個錨點插入到＃div1之後，如果我嘗試再次點擊#first鏈接沒有任何內容...

爲什麼這樣？

我創建了一個的jsfiddle：http://jsfiddle.net/jkL7bomw/

Answer 1

first的事件已經不存在了（原來#first被替換爲新的#first），當你直接操作HTML。改變DOM，而不是HTML的：

var a = document.createElement("a"); 
    a.href= "#"; 
    a.innerHTML = "Second"; 
    div1.appendChild(a); 

http://jsfiddle.net/jkL7bomw/1/

決不添加/更改元素與innerHTML除非你知道自己在做什麼。