15DOM编程API（三） 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <script>
 8         /*
 9             增删元素
10                 var hzli = document.createElement("元素名")  //创建元素
11                 父元素.appendChild(子元素)
12                 父元素.insertBefore(新元素,参照元素)
13                 父元素.replaceChild(新元素,被替换的元素)
14                 元素.remove()
15         */
16         function addHz(){
17             //创建一个新的元素
18             var hzli = document.createElement("li")  //<li></li>
19             //设置子元素的属性和文本
20             hzli.id="hz"
21             hzli.innerText="杭州"
22             //将子元素放入父元素中
23             var cityul = document.getElementById("city")
24             //在父元素中追加子元素
25             cityul.appendChild(hzli)
26         }
27         function addHzBeforeSz(){
28             //创建一个新的元素
29             var hzli = document.createElement("li")  //<li></li>
30             //设置子元素的属性和文本
31             hzli.id="hz"
32             hzli.innerText="杭州"
33             //将子元素放入父元素中
34             var cityul = document.getElementById("city")
35             //在父元素中追加子元素
36             var szli = document.getElementById("sz")
37             //cityul.insertBefore(新元素,参照元素)
38             cityul.insertBefore(hzli,szli)
39         }
40         function replacesz(){
41             //创建一个新的元素
42             var hzli = document.createElement("li")  //<li></li>
43             //设置子元素的属性和文本
44             hzli.id="hz"
45             hzli.innerText="杭州"
46             //将子元素放入父元素中
47             var cityul = document.getElementById("city")
48             //在父元素中追加子元素
49             var szli = document.getElementById("sz")
50             //cityul.replaceChild(新元素,被替换的元素)
51             cityul.replaceChild(hzli,szli)
52         }
53         function removesz(){
54             var szli = document.getElementById("sz")
55             szli.remove()
56         }
57         function clearCity(){
58             var cityul = document.getElementById("city")
59             var fc = cityul.firstChild
60             while(fc != null){          //一个个删除第一个子标签
61                 fc.remove()
62                 fc = cityul.firstChild
63             }
64             //cityul.innerHTML=""   //方法二：让文本为空
65         }
66     </script>
67 </head>
68 <body>
69     <ul id="city">
70         <li id="bj">北京</li>
71         <li id="sh">上海</li>
72         <li id="gz">广州</li>
73         <li id="sz">深圳</li>
74     </ul>
75     <hr>
76     <!-- 目标1 在城市列表的最后添加一个子标签  <li id="hz">杭州</li> -->
77     <button onclick="addHz()">增加杭州</button>
78     <!-- 目标2 在城市列表的深圳前添加一个子标签  <li id="hz">杭州</li> -->
79     <button onclick="addHzBeforeSz()">在深圳前加入杭州</button>
80     <!-- 目标3 将城市列表的深圳替换为  <li id="hz">杭州</li> -->
81     <button onclick="replacesz()">替换深圳</button>
82     <!-- 目标4 在城市列表删除深圳 -->
83     <button onclick="removesz()">删除深圳</button>
84     <!-- 目标5 清空城市列表 -->
85     <button onclick="clearCity()">删除深圳</button>
86 </body>
87 </html>

 

posted @ 2024-03-27 20:27  白茶花约  阅读(29)  评论(0)    收藏  举报