关于innerHTML破坏DOM结构的问题

将dom对象存入数组后，如果使用innerHTML编辑该对象的父级节点。即使用+=追加内容，对象也将被更新，导致数组中对原dom对象的引用失效：        

1. <!-- 测试步骤: addchild1 -> inner -> show -> 显示arr[0]是否还是child1对象 -->
2. <div id="parent1">
3. <div id="child1">child1</div>
4. </div>
5. 
   
6. <button οnclick="addchild1()">addchild1</button>
7. <button οnclick="inner()">inner</button>
8. <button οnclick="show()">show</button>
9. 
   
10. <SCRIPT LANGUAGE="JavaScript">
11. var arr = [];
12. function addchild1(){
13.     arr[0] = document.getElementById("child1")
14. }
15. 
    
16. function show(){
17.     alert(arr[0] == document.getElementById("child1"))
18. }
19. 
    
20. function inner(){ 
21.     //使用innerHTML会破坏dom结构，导致arr[0]失去对document.getElementById("child1")的引用
22.     //arr[0]只剩下节点片段：<div id="child1"></div>
23.     //所以即使能获取tagName,id等信息，但已经不是child1对象了
24.     //document.getElementById("parent1").innerHTML += "<div id='child2'>child2</div>";
25. 
    
26.     //使用正规的DOM方式增加节点能避免此问题
27.     var _a = document.createElement("div")
28.     _a.id="child2";
29.     _a.innerHTML = "child2"
30.     document.getElementById("parent1").appendChild(_a)
31.   
32. }
33. </SCRIPT>