关于操作document.body.innerHTML的问题

如下代码：
1.html
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
        function ADDBODY(){
            document.body.innerHTML += "ADDBODY"
        }
    </script>
</head>
<body>
    <input type="button" value="TEST" id="TEST" />
    <input type="button" value="ADDBODY" onclick="ADDBODY();" />
    <script type="text/javascript" src="1.js"></script>
</body>
</html>1.js
document.getElementById("TEST").onclick=function(){
    alert("TEST");
}问题描述：
当新打开页面时，点击TEST按钮，正常执行1.js中的alert("TEST");
但是当点击按钮ADDBODY后，再去点击TEST的时候，就不执行1.js中的alert("TEST");

解决方案 »

  1.   

    执行 document.body.innerHTML += "ADDBODY" 后页面内容被刷新了，但是 javascript 不会重复执行。即
    document.getElementById("TEST").onclick=function(){
        alert("TEST");
    }
    这段不会再次执行
      

  2.   

    试试：
    function ADDBODY(){
        var div = document.createElement('div');
        div.innerHTML = 'ADDBODY';
        document.body.appendChild(div);
    }