动态操作节点（appendChild()，insertBefore()，removeChild()，replaceChild()）

最新推荐文章于 2022-07-07 16:22:41 发布

HaahLeel

最新推荐文章于 2022-07-07 16:22:41 发布

阅读量1.7k

点赞数

分类专栏： miaov 笔记

本文链接：https://blog.csdn.net/NewStart_lh/article/details/46642563

版权

miaov 笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

本文介绍了JavaScript中用于动态操作DOM的四个基本方法：createElement()用于创建元素节点，appendChild()用于追加子元素，insertBefore()用于在指定元素前插入新元素，removeChild()用于删除节点，而replaceChild()则用于替换节点。

摘要由CSDN通过智能技术生成

JS里动态创建元素节点：document.createElement(‘标签名’)；
给一个元素追加一个子元素：当前元素.appendChild(子元素);
在指定的元素前插入新的元素：父级.insertBefore(‘新元素’,’当前元素’)；
删除节点（只能在父级下进行操作）:父级.removeChild(‘要删除的节点’);
替换节点：父级.replaceChild(替换的元素,被替换的元素)；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            var oInp=document.getElementById('inp');
            var oBtn=document.getElementById('btn');
            var oUl1=document.getElementById('ul1');

            var oP=document.getElementById('p1');
            var oBtn1=document.getElementById('btn1');
            var oDiv=document.getElementById('div1');
            oBtn.onclick=function(){
                var oLi=document.createElement('li'); //动态创建li元素
                oLi.innerHTML=oInp.value;
                //oUl1.appendChild(oLi);  // 追加子元素
                 //在指定的元素之前插入新元素
                if(oUl1.children[0]){      //兼容IE
                    oUl1.insertBefore(oLi,oUl1.children[0]);
                }else{
                    oUl1.appendChild(oLi)
                }
                var oA=document.createElement('a');
                oA.innerHTML='删除';
                oA.href='javascript:;';
                oA.onclick=function(){
                    oUl1.removeChild(this.parentNode);  //删除节点 只能在父级下进行操作
                }
                oLi.appendChild(oA);
            }

            oBtn1.onclick=function(){
//                document.body.replaceChild(oP,oDiv);  //p标签替换div
                oDiv.appendChild(oP);  // 也可以操作已有的节点 把p标签添加到div里面
            }
        }
    </script>
</head>
<body>
    <input type="text" id="inp"/>
    <input type="button" value="添加" id="btn"/>
    <ul id="ul1"></ul>

    <hr/>

    <p id="p1">我是P标签</p>
    <button id="btn1">替换</button>
    <div id="div1">我是div</div>
</body>
</html>