对DOM的增删改查

2021/12/17 23:25:15
编程Tag： Dom var li 节点增删 document 改查 City BJ
本文主要是介绍对DOM的增删改查，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title></title>
  6         <script type="text/javascript">
  7             
  8             window.onload= function(){
  9                 //创建一个广州节点，添加到#city下
 10                 myclick("btn01",function fun(){
 11                     //创建广州节点
 12                     //1 创建li元素节点
 13                     /* 
 14                     document.createElement();
 15                     可以用于创建一个元素节点对象
 16                     
 17                      */
 18                     var li=document.createElement("li");
 19                     //2创建文本节点
 20                     
 21                     //将广州节点添加
 22                     
 23                     var gzText=document.createTextNode("广州");
 24                     //将gzText设置为li的子节点
 25                     /*  appendChild()
 26                     向父节点中添加一个新的子节点
 27                     用法：父节点.appendChild(子节点);*/
 28                     li.appendChild(gzText);
 29                     //获取id为city的节点
 30                     var city=document.getElementById("city");
 31                     city.appendChild(li);
 32                     
 33                 });    
 34                 
 35                 
 36                 
 37             //    将广州节点插入到#bj前面
 38             myclick("btn02",function fun(){
 39                 
 40                 var li=document.createElement("li");
 41                 
 42                 var gzText=document.createTextNode("广州");
 43                 var bj=document.getElementById("bj");
 44                 li.appendChild(gzText);
 45                 //获取id为city的节点
 46                 var city=document.getElementById("city");
 47                 
 48                 //insertBefore()
 49                 /* 可以在指定的子节点前插入新的节点
 50                  用法：父节点.insertBefore(新节点,旧节点);*/
 51                 city.insertBefore(li,bj);
 52                 
 53             });    
 54             
 55             
 56             //    使用广州节点替换#bj节点
 57             myclick("btn03",function fun(){
 58                 
 59                 var li=document.createElement("li");
 60                 
 61                 var gzText=document.createTextNode("广州");
 62                 var bj=document.getElementById("bj");
 63                 li.appendChild(gzText);
 64                 //获取id为city的节点
 65                 var city=document.getElementById("city");
 66                 
 67                 //replaceChild()
 68                 /* 可以替换节点
 69                  用法：父节点.insertBefore(新节点,旧节点);*/
 70                 city.replaceChild(li,bj);
 71                 
 72             });    
 73             
 74             //删除北京节点
 75             myclick("btn04",function fun(){
 76                     var bj=document.getElementById("bj");
 77                     var city=document.getElementById("city");
 78                     /* 
 79                      removeChild()
 80                      删除对应节点
 81                      用法：父节点.removeChild(节点);
 82                      
 83                      节点.parentNode.removeChild(节点);
 84                      */
 85                     //city.removeChild(bj);
 86                     bj.parentNode.removeChild(bj);
 87                 });    
 88                 
 89             //读取#city内的html代码
 90             
 91             myclick("btn05",function fun(){
 92                 var city=document.getElementById("city");
 93                 console.log(city.innerHTML);
 94                 });    
 95             //    设置#bj内的html代码
 96                 myclick("btn06",function fun(){
 97                     var city=document.getElementById("city");
 98                     bj.innerHTML="娄底";
 99                     });    
100                 
101             };
102             
103             function myclick(idstr,fun){
104                 var btn=document.getElementById(idstr);
105                 btn.onclick=fun;
106             }
107         </script>
108     </head>
109     <body>
110         <div id="total">
111             <div class="inner">
112                 <p>
113                     你喜欢哪个城市？
114                 </p>
115                 
116                 <ul id="city">
117                     
118                     <li id="bj">北京</li>
119                     <li>上海</li>
120                     <li>东京</li>
121                     <li>首尔</li>
122                 </ul>
123             </div>
124             
125         </div>
126         
127         <div id="btnlist">
128             <div><button id="btn01">创建一个广州节点，添加到#city下</button></div>
129             <div><button id="btn02">将广州节点插入到#bj前面</button></div>
130             <div><button id="btn03">使用广州节点替换#bj节点</button></div>
131             <div><button id="btn04">删除#bj节点</button></div>
132             <div><button id="btn05">读取#city内的html代码</button></div>
133             <div><button id="btn06">设置#bj内的html代码</button></div>
134             
135         </div>
136     </body>
137 </html>
通过以上操作，可以对dom元素进行增删改查，希望大家可以掌握！
这篇关于对DOM的增删改查的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
对DOM的增删改查

相关编程文章
