这是什么原因？

Question

css:   ul{         list-style-type: none;     }html代码：   <div class="col-sm-4">         <div class="col-sm-6">             <a href="#" id="selAll1">--></a>             <ul id="sel1" >                 <li><a href="">item 01</a></li>                 <li><a href="">item 02</a></li>                 <li><a href="">item 03</a></li>                 <li><a href="">item 04</a></li>                 <li><a href="">item 05</a></li>             </ul>         </div>         <div class="col-sm-6">             <a href="#" id="selAll2"><--</a>             <ul id="sel2">             </ul>         </div>     </div>js代码：    var sel1=document.getElementById('sel1');     var sel2=document.getElementById('sel2');      for(var i=0;i<sel1.childNodes.length;i++){          sel1.childNodes[i].onclick= function () {              sel2.innerHTML+=("<li>"+this.innerHTML+"</li>");              this.innerHTML="";              return false;          }      }     /*下面这段完全没有作用*/     for(var i=0;i<sel2.childNodes.length;i++){         sel2.childNodes[i].onclick= function () {             sel1.innerHTML+=("<li>"+this.innerHTML+"</li>");             this.innerHTML="";             return false;         }     }

Answer 1

因为你还未点击时，第一个循环i的值已经是11了，无论你怎么点击，都是11，而且sel2.childNodes.length的值好恒等于0，这是在火狐下的情况；经过测试，在IE中，i的值是理想的，但是下面的点击会出现你里想不到的效果，可能是浏览器对你代码的理解不一样，因为你的代码看起来没错，但是存在运行上的错误，只是浏览器没报错而已。

Answer 2

用css伪类写 不是更好吗