关于onclick里面变量的问题

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="wrap">
            <div class="d">Item 1</div>
            <div class="d">Item 2</div>
            <div class="d">Item 3</div>
            <a id="link" href="#">链接</a>
        </div>
        <button id="btn">添加</button>

        <script type="text/javascript">
            var wrap = document.getElementById("wrap"),
                ds = wrap.getElementsByClassName("d"),
                link = document.getElementById("link"),
                btn = document.getElementById("btn");
            for(var i=0; i < ds.length; i++){
                ds[i].onclick = function(){
                console.log(this.innerHTML);
              }
            }
            link.onclick=function(){
                alert(1);
            }    
            btn.onclick = function(){
                var node = document.createElement("div");
                node.setAttribute("class", "d");
                node.innerHTML = "hello" ;
                node.onclick = function(){
                    console.log(this.innerHTML);
                }
                wrap.appendChild(node);
            }
        </script>
    </body>

</html>

如上代码,我不理解的地方是

 btn.onclick = function(){
                var node = document.createElement("div");
                node.setAttribute("class", "d");
                node.innerHTML = "hello" ;
                node.onclick = function(){
                    console.log(this.innerHTML);
                }
                wrap.appendChild(node);
            }

当点击这个添加按钮的时候，创建了一个元素节点并用node变量保存，然后给这个node又绑定了一个事件，我的疑问是当我点击btn多次，添加了不止一个node节点，这个node不会每次添加一个就把上一个node事件清空么..原理是什么？

不会的，因为你每点击一次就创建了一个div并给这个div绑定了了一个事件。每次点击出来的node都是新的node。
你F12调试一下就知道了

【热门文章】