js appendChild 自带remove和append两个功能

一提到appendChild ,我们就知道是在父节点上增加子节点。

经常使用到它就是动态增加一个元素，将其加入到指定的父节点下。

其实appendChild除了这个功能之外，他还有一个功能:如果子节点不是动态创建的元素，而是在某个元素下的子元素，那么他还会自动执行一次removeChild功能。

举个栗子：将ul1下的li移动到ul2下：

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>appendChild自带removeChild功能</title>
        <style type="text/css">
            #ul1{
                background: red;
            }
            #ul2{
                background: greenyellow;
            }
        </style>
    </head>
    <body>
        <ul id="ul1">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <button id="btn1">移动</button>
        <ul id="ul2"></ul>
    </body>
</html>

 

正常思路下的javascript:

<script type="text/javascript">
    var ul1 = document.getElementById("ul1");
    var ul2 = document.getElementById("ul2");
    var btn1 = document.getElementById("btn1");
    btn1.onclick = function(){
        //获取ul1下所有li
        olis = ul1.getElementsByTagName("li");
        if(olis.length>0){
            //获取ul1下的第一个li
            var oLi = ul1.children[0];
            //删除ul1下面的第一个li
            ul1.removeChild(oLi);
            //给ul2下面增加ul1下的第一个Li
            ul2.appendChild(oLi);
        }
    }
</script>

去掉removeChild下的javascript:

<script type="text/javascript">
    var ul1 = document.getElementById("ul1");
    var ul2 = document.getElementById("ul2");
    var btn1 = document.getElementById("btn1");
    btn1.onclick = function(){
        //获取ul1下所有li
        olis = ul1.getElementsByTagName("li");
        if(olis.length>0){
            //获取ul1下的第一个li
            var oLi = ul1.children[0];
            //删除ul1下面的第一个li
            //ul1.removeChild(oLi);
            //给ul2下面增加ul1下的第一个Li
            ul2.appendChild(oLi);
        }
    }
</script>

其实有没有removeChild ul1下的li效果都是一样的，因为appendChild()会先remove子元素之前位置父元素下的该元素，然后再新的父元素上添加该子元素。

 

posted @ 2017-10-27 15:03  进击的小牛牛  阅读(5984)  评论(0)  编辑  收藏  举报