DOM操作应用

最新推荐文章于 2021-11-29 09:10:03 发布

Donner_

最新推荐文章于 2021-11-29 09:10:03 发布

阅读量133

点赞数

分类专栏： jsxuexi 文章标签： js

本文链接：https://blog.csdn.net/weixin_47700237/article/details/107222461

版权

jsxuexi 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

创建、插入和删除元素

创建DOM元素

 <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn1');
            var oUl=document.getElementById('ul1');
            var oTxt=document.getElementById('txt1');

            oBtn.onclick=function(){
                //创建li
                var oLi= document.createElement('li');
                oLi.innerHTML=oTxt.value;
                //父级.appendChild（子节点）；--添加到父级上
                oUl.appendChild(oLi);
            };
        }
    </script>
</head>
<body>
    <input id="txt1" type="text">
    <input id="btn1" type="button" value="创建li">
    <ul id="ul1">

    </ul>
</body>

插入元素

父级.insertBefore(子节点，在谁之前)

 window.onload=function(){
            var oBtn=document.getElementById('btn1');
            var oUl=document.getElementById('ul1');
            var oTxt=document.getElementById('txt1');

            oBtn.onclick=function(){
                //创建li
                var oLi= document.createElement('li');
                var aLi=oUl.getElementsByTagName('li');

                oLi.innerHTML=oTxt.value;

                //父级.insertBefore(子节点，在谁之前)
                //oUl.insertBefore(oLi,aLi[0]);
                //解决IE不兼容问题
                if(aLi.length>0){
                    oUl.insertBefore(oLi,aLi[0]);
                }
                else{
                    oUl.appendChild(oLi);
                }
            };
        }
    </script>
</head>
<body>
    <input id="txt1" type="text">
    <input id="btn1" type="button" value="创建li">
    <ul id="ul1">

    </ul>

删除元素

父级.removeChild(子节点) //从父级中删除

<script>
        window.onload=function(){
            var aA=document.getElementsByTagName('a');
            var oUl=document.getElementById('ul1');

            for (var i=0;i<aA.length;i++){
                aA[i].onclick=function(){
                    //父级.removeChild(子节点)    从父级中删除
                    oUl.removeChild(this.parentNode);
                }
            }
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <li>nakkjnaj <a href="javascript:;">删除</a></li>
        <li>dhbsr <a href="javascript:;">删除</a></li>
        <li>64165165 <a href="javascript:;">删除</a></li>
        <li>4g1s65g1 <a href="javascript:;">删除</a></li>
    </ul>
</body>

文档碎片

    <script>
        window.onload=function(){
            var oUl=document.getElementById('ul1');
            var oFrag=document.createDocumentFragment(); //对于低版本浏览器适用

            for(var i=0;i<10000;i++){
                var oLi=document.createElement('li');
                
                oFrag.appendChild(oLi);
            }
            oUl.appendChild(oFrag);
        }
    </script>
</head>
<body>
    <ul id="ul1">

    </ul>
</body>

Donner_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM操作应用

创建、插入和删除元素创建DOM元素 <script> window.onload=function(){ var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); var oTxt=document.getElementById('txt1'); oBtn.onclick=f
复制链接

扫一扫