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>

 

 

posted @ 2013-03-05 17:42  yexingwen  阅读(1137)  评论(0编辑  收藏  举报