createElement创建元素
创建元素是用createElement,先把创建的元素赋值给一个变量,再把这个变量插入到文档元素中。末尾插入元素是用:appendChild appendChild的形式是:父级.appendChild(子节点),把子节点插入到父级下的末尾。
insertBefore:在父级之前插入子节点,形式:父级.insertBefore(子节点,在谁之前)
removeChild:从父级删除一个子节点,形式父级.appendChild(removeChild)
正常顺序插入Li 和倒序插入LI代码:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>倒序插入li</title> 6 <script> 7 window.onload=function() 8 { 9 var oTxt=document.getElementById('txt'); 10 var oBtn=document.getElementById('btn'); 11 var oBtn1=document.getElementById('btn1'); 12 var oUl=document.getElementById('ul'); 13 14 15 oBtn.onclick=function() 16 { 17 var oli=document.createElement('li'); 18 oli.innerHTML=oTxt.value; 19 oUl.appendChild(oli); 20 }; 21 22 oBtn1.onclick=function() 23 { 24 var oli=document.createElement('li'); 25 var ali=document.getElementsByTagName('li'); 26 oli.innerHTML=oTxt.value; 27 if(ali.length>0) 28 { 29 oUl.insertBefore(oli,ali[0]); 30 } 31 else 32 { 33 oUl.appendChild(oli); 34 } 35 }; 36 }; 37 </script> 38 </head> 39 40 <body> 41 <h1>正常顺序常插入li、倒序插入li</h1> 42 <input type="txt" id="txt" /> 43 <input type="button" id="btn" value="正常顺序插入li" /> <input type="button" id="btn1" value="倒序插入li" /> 44 <ul id="ul"></ul> 45 </body> 46 </html>