JavaScript（4）
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>
运行效果：
