您的位置：首页 > 其它

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

2018-01-30 19:55 627 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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