js关于修改innerHtml改变其字元素内存地址的问题

最近做一个数独，实现其中一个功能时发现一个问题，对一个元素的innerHtml追加后之前存储在对象中的dom元素地址找不到了，然后自然是报错…

在调试中发现问题，但是并不知道为什么会发生这个问题，苦想许久想到可能是因为回流于是上代码试了下

<div class="main">
	<div class="d1">这是一个div</div>
</div>
<script type="text/javascript">
	function a(){//先创建一个闭包（）
		var d1=document.querySelector(".d1");
		function b(){
			console.log(d1);
			return d1;
		}
		return b;
	}
	var c=a();
	console.log(c()==document.querySelector(".d1"));  //true
	//对元素使用appendChild()
	var main=document.querySelector(".main");
	var div=document.createElement("div");
	main.appendChild(div);
	console.log(c()==document.querySelector(".d1"));  //true
	//对元素追加innerHtml
	main.innerHTML+=document.querySelector(".d1").innerHTML;
	console.log(c()==document.querySelector(".d1"));  //false
</script>

把代码复制在google浏览器中把鼠标悬浮在打印出的元素上会有更直观的体现（不过因为地址已经改变了所以可以在最后两行代码前加断点或注释）

如上代码，直接比较内存中的地址，对元素使用appendChild()方法并没有使其中的元素地址发生改变，但是对元素追加innerHtml后其内部的子元素地址发生了改变，我猜测可能是因为其中的innerHtml发生了改变触发了回流，回流时将其之前的元素删除并重新创建导致的（具体不清楚，水平不够无法验证）。

遇到这种情况还是不要直接全部用追加innerHtml的方法添加dom元素，乖乖用appendChild()吧，不过受到元素在内存中地址变化而出现问题的代码并不常见，因为一般都是使用元素的事件再去获取。

最后附数独地址 https://github.com/yangtengxiang/sudoku