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>
标签：编程,hzli,元素,15DOM,getElementById,API,var,cityul,document From： https://www.cnblogs.com/IrVolcano/p/18100164