关于操作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");