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元素进行增删改查，希望大家可以掌握！