首页 > 代码库 > 元素动态操作

元素动态操作

2024-09-11 01:06:25   217人阅读

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>Document</title>
 7     </head>
 8 
 9     <body>
10         <input id=‘txt1‘ type="text">
11         <input id=‘btn1‘ type="button" value="留言">
12         <ul id="ul1"></ul>
13         <script>
14             window.onload = function() {
15 
16                 var oTxt = document.getElementById(‘txt1‘);
17                 var oBtn = document.getElementById(‘btn1‘);
18                 var oUl = document.getElementById(‘ul1‘);
19 
20                 /**
21                 
22                     document.createElement(‘标签名‘); 创建元素
23               
24                     父级.appendChild();添加元素
25 
26                     父级.insertBefore(新的元素,被插入的元素);
27                       在ie下如果第二个参数表示的元素不存在，则会报错
28                       在其他标准浏览器中，则会使用appendChild进行插入操作
29 
30                     父元素.replaceChild(新元素，旧元素);元素替换
31 
32                 */
33 
34                 oBtn.onclick = function() {
35                     var oLi = document.createElement(‘li‘);
36                     var oA = document.createElement(‘a‘);
37                     oA.innerHTML = ‘删除‘;
38                     oA.href = ‘javascript:;‘;
39                     oA.onclick = function() {
40                         // 删除当前行
41                         this.parentNode.parentNode.removeChild(this.parentNode);
42                     }
43 
44                     oLi.innerHTML = oTxt.value;
45 
46                     oTxt.value=‘‘;
47 
48                     // 插入新建元素
49                     oLi.appendChild(oA);
50                     if (oUl.children.length >= 10) {
51                         // 删除最旧的数据
52                         oUl.removeChild(oUl.children[oUl.children.length-1]);
53                     }
54                     // 添加子元素
55                     addEle(oUl, oLi, oUl.children[0]);
56                 };
57 
58                 function addEle(obj, param1, param2) {
59                     if (obj.children[0]) {
60                         obj.insertBefore(param1, param2);
61                     } else {
62                         obj.appendChild(param1);
63                     }
64                 }
65             };
66         </script>
67     </body>
68 
69 </html>

 

元素动态操作


联系
我们