js数组保存的对象的属性变为空

Question

用createElement是没问题的 
<div id="div1">
        
    </div>
    <div>
        <input id="Button1" type="button" value="设置" onclick="setInnerHTML()" />
        <input id="Button3" type="button" value="追加" onclick="appendInnerHTML()" />
        <input id="Button2" type="button" value="显示" onclick="getInnerHTML()" />
    </div>
<script type="text/javascript">
    var array = new Array();
    function setInnerHTML() {        document.getElementById("div1").innerHTML = "<div id='div2' style=' width:50px; height:50px; background-color:Aqua;'>"
                                           + " wwww </div>";
        array.push(document.getElementById("div2"));
        alert("设置成功");    }    function appendInnerHTML() {        alert(array[0].innerText);
        document.getElementById("div1").innerHTML += "<div id='div3' style=' width:50px; height:50px; background-color:red;'>"
                                                    + " ssssss </div>";
        alert(array[0].id);
        alert(array[0].innerText);
    }    function getInnerHTML() {        alert(document.getElementById("div2").innerText);
        alert(array[0].innerText);
    
    }
</script>js数组

Answer 1

数组里面应该push是代码，而不是对象~，如果保存的是对象，你那种写法是不对的~/*修改过的：*/

var arr = [];

//设置
function setInnerHTML()
{
arr = []; //清空
var $div1 = document.getElementById("div1");
var s1 = "<div id='div2' style=' width:50px;margin: 3px 0; height:50px; background-color:Aqua;'>"
   + " wwww </div>"
$div1.innerHTML = s1;
alert("div1 done it");
arr.push(s1)
}

//追加
function appendInnerHTML()
{
var $div1 = document.getElementById("div1");
var s1 = "<div id='div3' style=' width:50px; margin: 3px 0; height:50px; background-color:Aqua;'>"
   + " wwww </div>"
arr.push(s1)
$div1.innerHTML = arr.join("");
alert( s1);
}

Answer 2

我认为数组是可以保存对象的，用createElement这种写法是没问题的。问题是这样的，第一次push进的对象是可以正常访问的，innerHTML+=以后，数组保存的对象的属性就会变为空，但是对象的id是存在的

Answer 3

要下班了，不想打字了，写代码快一些，自己看吧
<div id="div"></div>
<div>
<input id="Button1" type="button" value="设置" onclick="setInnerHTML('1')" />
<input id="Button3" type="button" value="追加" onclick="appendInnerHTML('2')" />
<input id="Button2" type="button" value="显示" onclick="getInnerHTML()" />
</div>
<script type="text/javascript">
    var array = new Array();
    function setInnerHTML(str) {
var parent = document.getElementById("div");
        document.getElementById("div").innerHTML = "<div id='div1' style=' width:50px; height:50px; background-color:Aqua;'>" + str + "</div>";
        array.push(document.getElementById("div1"));
        alert("设置成功");
    }    function appendInnerHTML(str) {
var parent = document.getElementById("div");
var id = 'div' + (getItems().length + 1);        
        parent.innerHTML += "<div id='" + id + "' style=' width:50px; height:50px; background-color:red;'>" + str + "</div>";
        array = [];
Array.prototype.push.apply(array, getItems());
alert(array[array.length - 1].id);
        alert(array[array.length - 1].innerHTML);
    }    function getInnerHTML(index) {
var node = array[(typeof(index) == 'number'? Math.max(0, Math.min(index, array.length - 1)) : 0)]; 
alert(node.innerHTML);
        alert(array[0].id);    
    }

function getItems() {
var items = document.getElementById("div").getElementsByTagName("div");
var len = items.length;
var subItem, id;
var result = [];
for(var i = 0; i < len; i++) {
subItem = items[i];
id = subItem.getAttribute("id");
if(id && (/^div\d+$/).test(id)) {
result.push(subItem);
}
} 
return result;
}
</script>

Answer 4

这个和代码对错没有关系。我测试了一下。当在有innerHTML追加（+=）时,数组中保存的DIV2的对象在各浏览器返回结果各不一样。在IE9下时，确实为空。在FF下时，为undifened.在chrome下时，则显示正常。也就是说各浏览器在处理innerHTML追加时，对数组中已保存的DIV2对象解析的方法是不一样的。至于为什么结果各异，同求高手解释下。谢谢！