Question

javascript innerHTML累加值问题~~求解

我想实现innerHTML的累加，做了个框架，是将所有获取的元素存到数组里的，然后在使用innerHTML += ""便会出现问题：问题如下： 它们用的是统一的HTML代码<div class="div">         <div>AAA</div>         <div>BBB</div>        <div>CCC</div>    <div>DDD</div></div> /*********************************一、传统方法，可以通过**********************************/var dom = document.getElementsByTagName("div");    for(var i =0;i<dom.length;i++){       dom[i].innerHTML += "append";    }/*********************************二、数组方法，只能累加第一个**********************************/    var temp = [];    var dom = document.getElementsByTagName("div");    for(var i =0;i<dom.length;i++){  //先把每个元素存到数组里       temp.push(dom[i]);    }    for(var j =0;j<dom.length;j++){  //然后从数组里调用       temp[j].innerHTML += "append";    }  //请分开测试，我求方法二的数组方式，应该如何实现方法一的功能？

Answer 1

发现问题所在了，因为你的Div写的不对。

你的DIV结构如下：
<div class="div">
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<div>DDD</div>
</div>

通过document.getElementsByTagName("div")取到的对象有5个，而不是你期待的4个
temp[0] 其实等于 在外层的那个Div，因此上 temp[0].innerHTML += "append"; 已经把
整个第一层Div内部的元素全部改变了，成为以下：

<div class="div">
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<div>DDD</div>
append
</div>

再往下的循环 temp[1] - temp[4] 实际上在页面上已经不存在了（在你保存的数组中存在，但是和页面上的不再是同一个Dom对象了），所以画面的表象就成了上面的样子，好像只累加第一个似的。如果去掉外面的那个Div，有以下的结果：

<div>AAAappend</div>
<div>BBBappend</div>
<div>CCCappend</div>
<div>DDDappend</div>