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; 

我摧毁和重建我的网页，因此我失去了我的活动的全部内容。