标签：city DOM 改查 bj li var 增删 document 节点
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元素进行增删改查，希望大家可以掌握！
标签：city,DOM,改查,bj,li,var,增删,document,节点 来源： https://www.cnblogs.com/yqPhare/p/15704046.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。