想问一下`appendChild`的一些问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul class="ct">
            <li class="item">
                <span class="s">1</span>
                1
            </li>
            <li class="item">
                <span class="s">4</span>
                1
            </li>
            <li class="item">
                <span class="s">3</span>
                1
            </li>
            <li class="item">
                <span class="s">2</span>
                1
            </li>
        </ul>
        <script type="text/javascript">
            var oul=document.getElementsByClassName("ct")[0];
            var oli=document.getElementsByClassName("item");
            var copyul=[];
            for(var i=0;i<oli.length;i++){
                copyul.push(oli[i]);
            }
            copyul.sort(function(a,b){
                return a.firstElementChild.innerText-b.firstElementChild.innerText;
            })
            for(var j=0;j<copyul.length;j++){
                oul.appendChild(copyul[j]);
            }    
        </script>
    </body>
</html>

问题是我一开始复制了item里面的每一项，最后把里面的每一项appendChild到oul里面，为什么之前的那个就消除了，appendChild不是在元素末尾添加了，不应该复制了一份添加到末尾么，为什么还是4个item，而不是8个

copyul.push(oli[i]);

改为

copyul.push(oli[i].cloneNode(true));

之所以原来的没增加新的节点是因为你操作的节点对象本来就是页面中的那4个。

【热门文章】