这是什么原因？

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伪类写 不是更好吗