JS事件。只有一個事件處理函數被調用？

Question

大家好！
我有一個問題，我不知道如何解決它！

我有一個簡單的HTML頁面的按鈕：

<input type = "submit" value = "ok" onclick="f1()"/> 

我也有一個腳本，在此頁上：

<script>  
function f2()  
{   
    var firstBtn = document.createElement("button");   
    firstBtn.appendChild(document.createTextNode("firstBtn")); 
    document.body.appendChild(firstBtn); 
    var xmlhttp = CreateRequest(); 
    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     var response = xmlhttp.responseText;    
     document.body.innerHTML += response; 
     } 
    } 
    firstBtn.onclick = function() 
    { 
    alert("inside f2 onclick"); 
    xmlhttp.open("GET","test.php",true); 
    xmlhttp.send(); 
    } 

}  
function f3() 
{ 
    var secondBtn = document.createElement("button");    
    secondBtn.appendChild(document.createTextNode("secondBtn"));  
    document.body.appendChild(secondBtn); 
    var xmlhttp = CreateRequest(); 
    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     var response = xmlhttp.responseText;    
     document.body.innerHTML += response; 
     } 
    } 
    secondBtn.onclick = function() 
    { 
    alert("inside f3 onclick"); 
    xmlhttp.open("GET","test.php",true); 
    xmlhttp.send(); 
    } 
} 
function f1()  
{ 
    f2(); 
    f3(); 
} 
function CreateRequest() 
{ 
    var xmlhttp; 
    if (window.XMLHttpRequest)    
     xmlhttp=new XMLHttpRequest();// code for IE7+, Firefox, Chrome, Opera, Safari  
    else      
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// code for IE6, IE5 

    return xmlhttp; 
} 
</script> 

所以現在，當我點擊一個按鈕（firstBtn或secondBtn），另一個不響應點擊事件！有人知道爲什麼嗎？

Answer 1

正如@vishwanath說（見註釋這個問題），當我做

document.body.innerHTML += response; 

我摧毀和重建我的網頁，因此我失去了我的活動的全部內容。