webday03-DOM-节点的增删改查

最新推荐文章于 2021-08-30 00:36:14 发布

Victoria446704822

最新推荐文章于 2021-08-30 00:36:14 发布

阅读量145

点赞数

本文链接：https://blog.csdn.net/weixin_47407295/article/details/108181236

版权

<!DOCTYPE HTML>
<html>
   <head>
       <title>节点的增删改查</title>
       <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
       
       <style type="text/css">
           div{border:#0099FF 1px solid; height:60px; width:120px; margin:20px 0px 20px 20px; padding:10px 0px 0px 20px;}
           #div_1{background-color: #00FFFF;}
           #div_2{background-color: #FF3399;}
           #div_3{background-color: #0000FF;}
           #div_4{background-color: #FFFF66;}
       </style>
       <script type="text/javascript">
           /*--添加节点：添加一个div元素到body的最后面--*/
           function fn1(){
               //创建新元素
               var div=document.createElement("div")
               div.innerHTML="我是新来的！"
               //获取body
               var body=document.getElementsByTagName("body")[0]
               //把新元素添加到body后面
               body.appendChild(div)
           }
           /*--删除节点：删除body中id值为div_3的div元素--*/
           function fn2(){
               //获取body
               var body=document.getElementsByTagName("body")[0]
               //获取div3
               var div3=document.getElementById("div_3")
               //从body中删除div3
               body.removeChild(div3)
           }
           /*--更新节点：用新节点替换id值为div_2的div元素--*/
           function fn3(){
               //创建新元素
               var div=document.createElement("div")
               div.innerHTML="我是替换的！"
               //获取div2
               var div2=document.getElementById("div_2")
               //获取body
               var body=document.getElementsByTagName("body")[0]
               //新元素替换body的div2元素
               body.replaceChild(div,div2)
           }

           /*--克隆节点、插入节点到第二个元素的前面--*/
           function fn4(){
               //获取div4
               var div4=document.getElementById("div_4")
               //克隆div4
               var cn=div4.cloneNode(true)
               //获取div2
               var div2=document.getElementById("div_2")
               //获取body
               var body=document.getElementsByTagName("body")[0]
               //把克隆节点插入到第二个元素的前面
               body.insertBefore(cn,div2)
           }
       </script>
   </head>
   <body>
       <div id="div_1">
           div区域1
       </div>

       <div id="div_2">
           div区域2
       </div>

       <div id="div_3">
           div区域3
       </div>

       <div id="div_4">
           div区域4
       </div>

</html>

Victoria446704822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webday03-DOM-节点的增删改查

<!DOCTYPE HTML><html> <head> <title>节点的增删改查</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />  <style type="text/css"> ...
复制链接

扫一扫