Javascript DOM 02 在
    中创建、删除

 

创建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
 
 
 
 
 

你可能感兴趣的:(JavaScript)