DOM操作
1、创建DOM元素
a、createElement（标签名） ----创建一个节点
b、appendChild(节点) -----追加一个节点
例子：为ul插入li
代码：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <script>
7 window.onload = function (){
8
9 var oBtn = document.getElementById(‘btn1‘);
10 oUl = document.getElementById(‘ul1‘);
11 oBtn.onclick = function (){
12
13 oLi = document.createElement(‘li‘);//创建节点
14 oUl.appendChild(oLi);//插入节点
15 }
16
17 }
18 </script>
19 </head>
20
21 <body>
22 <input id="btn1" type="button" value="创建Li"/>
23 <ul id="ul1">
24
25 </ul>
26 </body>
27 </html>
运行效果：
为li里面加入内容：
代码：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <script>
7 window.onload = function (){
8
9 var oBtn = document.getElementById(‘btn1‘);
10 oUl = document.getElementById(‘ul1‘);
11 var oText = document.getElementById(‘text1‘);
12 oBtn.onclick = function (){
13
14 oLi = document.createElement(‘li‘);//创建节点
15 oLi.innerHTML = oText.value;//加入输入的内容
16 oUl.appendChild(oLi);//插入节点
17 }
18
19 }
20 </script>
21 </head>
22
23 <body>
24 <input id="text1" type="text"/>
25 <input id="btn1" type="button" value="创建Li"/>
26 <ul id="ul1">
27
28 </ul>
29 </body>
30 </html>
运行效果：
2、插入元素
a、insertBefore(节点，原有节点) ---在已有元素之前插入
--例子：倒序插入li
代码：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <script>
7 window.onload = function (){
8
9 var oBtn = document.getElementById(‘btn1‘);
10 oUl = document.getElementById(‘ul1‘);
11 var oText = document.getElementById(‘text1‘);
12 aLi = document.getElementsByTagName(‘li‘);
13 oBtn.onclick = function (){
14
15 oLi = document.createElement(‘li‘);//创建节点
16 oLi.innerHTML = oText.value;//赋值
17 oUl.insertBefore(oLi,aLi[0]);//插入元素
18
19 }
20
21 }
22 </script>
23 </head>
24
25 <body>
26 <input id="text1" type="text"/>
27 <input id="btn1" type="button" value="创建Li"/>
28 <ul id="ul1">
29
30 </ul>
31 </body>
32 </html>
运行效果：
3、删除DOM元素
a、removeChild(节点) ---删除一个节点
--例子：删除li
代码：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <script>
7 window.onload = function (){
8 var oUl = document.getElementById(‘ul1‘);
9 var oA = document.getElementsByTagName(‘a‘);
10 for(var i=0;i<oA.length;i++){
11
12 oA[i].onclick = function (){
13 oUl.removeChild(this.parentNode);
14 }
15 }
16
17 }
18 </script>
19 </head>
20
21 <body>
22 <ul id="ul1">
23 <li>aaaaaaa<a href="javascript:;">删除</a></li>
24 <li>bbbbbbb<a href="javascript:;">删除</a></li>
25 <li>ccccccc<a href="javascript:;">删除</a></li>
26 <li>ddddddd<a href="javascript:;">删除</a></li>
27 <li>eeeeeee<a href="javascript:;">删除</a></li>
28 <li>fffffff<a href="javascript:;">删除</a></li>
29 <li>ggggggg<a href="javascript:;">删除</a></li>
30 </ul>
31 </body>
32 </html>
运行效果：
时间： 2024-08-04 18:33:51