dom操作节点增删替换 // 创建节点获得节点删除节点获得节点属性

最新推荐文章于 2023-03-30 10:52:21 发布

ch5211314

最新推荐文章于 2023-03-30 10:52:21 发布

阅读量270

点赞数

本文链接：https://blog.csdn.net/ch5211314/article/details/79210013

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>

       <div id="div1">


           <p id="p1">我是元素1</p>
           <p id="p2">我是元素2</p>

       </div>


       <p id="p3">我是元素3</p>

       <script>

           //增加节点
           function addnodes(){

               //创建一个节点
               var p1 = document.createElement("p");

               p1.innerHTML="我是新加的元素"


               //找到div
               var div1 = document.getElementById("div1");

               var p1111 = document.getElementById("p1");
               //向div1里面去添加节点 appendChild默认添加到后面
               //div1.appendChild(p1);


               div1.insertBefore(p1,p1111);

           }
           //删除节点
           function removeNodes(){
               //找到父节点
               var div1 = document.getElementById("div1");
               //要移除的节点
               var p1 = document.getElementById("p1");

               div1.removeChild(p1);

           }

           //替换节点
           function replaceNodes(){

               //alert("aaa")

               //找到父节点
               var div1 = document.getElementById("div1");

               var p1 = document.getElementById("p1");
               var p2 = document.getElementById("p2");

               //div1.replaceChild(p1,"<e>3333</e>");
               div1.replaceChild(<e>aaa</e>,p1);
           //   div1.replaceChild(p2,p1);

           }


           //addnodes();

           //removeNodes();

           replaceNodes();
       </script>


   </body>

</html>

----------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>

       <div id="div1">
           <p id="p1">元素1</p>

           <p>元素2</p>

       </div>


       <p id="p2" title="我是属性">测试文本</p>
   </body>

   <script>
       //创建节点
       function createEle(){

           var div1 = document.getElementById("div1");

           var pp = document.createElement("p");

           var p1 = document.getElementById("p1");

           pp.innerHTML="我是新加的标签";
           //appendChild 默认加在后面
           //div1.appendChild(pp);

           div1.insertBefore(pp,p1);
       }


       //删除节点
       function deleteEle(){

           var div1 = document.getElementById("div1");
           //找到要删除的节点
           var p1 = document.getElementById("p1");

           div1.removeChild(p1)
       }

       //获得节点的属性
       function getAttr(){

           var p2 = document.getElementById("p2");
           alert(p2.getAttribute("title"));

       }

       //获得地址
       function getLocation(){

           alert(window.location.href);

       }

       //createEle();   //创建节点
       //deleteEle();     //删除节点

       //getAttr();

       getLocation();   //获得属性

   </script>
</html>