Javascript DOM 02 在<ul>中创建、删除 <li>

创建DOM元素

createElement(标签名) 创建一个节点

appendChild(节点) 追加一个节点

例子：为ul插入li

插入元素

insertBefore(节点, 原有节点) 在已有元素前插入

例子：倒序插入li

删除DOM元素

removeChild(节点) 删除一个节点

例子：删除li

文档碎片

文档碎片可以提高DOM操作性能(理论上)

文档碎片原理

document.createDocumentFragment()

创建 <li>

 1 <script>
 2    window.onload= function ()
 3    {
 4         var oBtn=document.getElementById('btn1');
 5         var oUl=document.getElementById('ull');
 6         var ali=document.getElementsByTagName('li');
 7         var oTxt=document.getElementById('txt');
 8         oBtn.onclick=function ()
 9         {
10             var oLi=document.createElement('li');
11             //父级.appendChild(子节点);
12             //oUl.appendChild(oLi);//在已有元素后插入
13             oLi.innerHTML=oTxt.value;
14             //oUl.insertBefore(oLi,ali[0]);//在任意元素前插入
15             //为了兼容， 最好选择下面这种方法,原因是有时ul里会没有li标签
16             //alert(ali.length);//判断li的个数
17             if(ali.length>0)
18             {
19                 oUl.insertBefore(oLi,ali[0]);
20                 }
21                 else{oUl.appendChild(oLi); }
22         }
23 
24 
25 }
26 </script>
27 </head>
28 
29 <body>
30 
31 <div id="divId">
32 <input type="text" id="txt"/>
33 <input type="button" id="btn1" value="创建 li"/>
34   <ul id="ull">
35      <li>jgjghmjnhg</li>
36      <li>1234255535</li>
37      <li>vmhmbmbmbh</li>
38      <li>6878987978</li>
39   </ul>
40 
41 </div>
42 
43 </body>

删除<li>

 1 <script>
 2    window.onload= function ()
 3    {
 4         var aHref=document.getElementsByTagName('a');
 5         var oUl=document.getElementById('ull');
 6         for(var i=0 ; i<aHref.length;i++)
 7         {
 8             aHref[i].onclick=function ()
 9             {
10                 oUl.removeChild(this.parentNode);
11                 }     
12             }
13         
14 }
15 </script>
16 </head>
17 
18 <body>
19 
20 <div id="divId">
21 
22   <ul id="ull">
23      <li>jgjghmjnhg <a href="javascript:;">删除</a></li>
24      <li>1234255535 <a href="javascript:;">删除</a></li>
25      <li>vmhmbmbmbh <a href="javascript:;">删除</a></li>
26      <li>6878987978 <a href="javascript:;">删除</a></li>
27   </ul>
28 
29 </div>
30 
31 </body>

javascript DOM 基础篇 01 ： http://www.cnblogs.com/izhiniao/p/3698464.html