首页 > 代码库 > JavaScript（4）

JavaScript（4）

2024-09-22 17:09:20   214人阅读

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>

运行效果：

技术分享

 

JavaScript（4）


联系
我们