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>

 

 

你可能感兴趣的:(element)