Dom如何创建和删除元素节点

最新推荐文章于 2024-02-29 10:36:35 发布

beibei_niao

最新推荐文章于 2024-02-29 10:36:35 发布

阅读量220

点赞数 1

文章标签： dom节点操作

本文链接：https://blog.csdn.net/beibei_niao/article/details/103646604

版权

DOM节点操作--创建和删除元素节点

<body>
    <ul id="list1">
        <li>样板房</li>
    </ul>
    <div>
        <button type="button" onclick="addElementLi();">添加LI</button>
        <button type="button" onclick="removeElementLi();">删除最后一个LI</button>
    </div>
    <script>
        function addElementLi(){
            //添加li；
            //1.获取到目标父节点对象
            var oUl = document.getElementById("list1");
            //2.创建li子节点对象
            var oLi = document.createElement('li');
            console.log(oLi);  //<li></li>
            //3.添加子节点到父节点对象中去
            //该方法是在子元素的末尾追加一个子元素
            oUl.appendChild(oLi);
            //4.创建一个文本节点
            var oText = document.createTextNode('banana')
            //5.把文本节点，添加到li元素中去
            oLi.appendChild(oText);
        }
        
        //上面一个函数，<li>中没有文本。
两次添加子节点，每一次都会重新渲染页面；浏览器的性能消耗上有点大，如何调整？
        function addElementLi(){
            //添加li；
            //1.获取到目标父节点对象
            var oUl = document.getElementById("list1");
            //2.创建li子节点对象
            var oLi = document.createElement('li');
            console.log(oLi);  //<li></li>
            //3.创建一个文本节点
            var oText = document.createTextNode('banana')
            //4.把文本节点，添加到li元素中去
            oLi.appendChild(oText);
   上面4个步骤都是在内存中完成的，消耗的是内存，没有触发页面的渲染
            //5.添加子节点到父节点对象中去
            //该方法是在子元素的末尾追加一个子元素
            oUl.appendChild(oLi);
        } 
        
        function removeElementLi(){
            //父节点.removeChild()
            //1.获取父节点ul对象
            var oUl = document.getElementById("list1");
            //如果父节点没有子节点则直接返回，不执行后面的代码
            if(!oUl.hasChildNodes()){  //如果没有子节点元素  !false === true
                return;
            }//避免没有子元素时删除子元素会报错
            
            //2.1获取父节点中，最后一个li子节点对象
            var childLi = oUl.lastChild;
            oUl.removeChild(childLi)；
            //2.1 方法2
            var arrChild = oUl.children;//返回所有子节点列表，一个Array
            //最后一个子元素节点的表示：arrChild[arrChild.length-1]
            var a = arrChild[arrChild.length-1];
            oUl.removeChild(a);
        }
    </script>
</body>

beibei_niao

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Dom如何创建和删除元素节点

DOM节点操作--创建和删除元素节点<body> <ul id="list1"> <li>样板房</li> </ul> <div> <button type="button" onclick="addElementLi();">添加LI</but...
复制链接

扫一扫