(025)javascript_dom_insertBefore 

 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>DOM</title>
 6     <script type="text/javascript">
 7 
 8         window.onload = function() {
 9 
10             var btnNode = document.getElementById("mybtn");
11             var ulNode = document.getElementById("myul");
12             var textNode = document.getElementById("mytext");
13 
14             
15 
16             btnNode.onclick = function() {
17 
18                 var liNode = document.createElement("li");
19 
20                 liNode.innerHTML = textNode.value;
21 
22                 var liNodeArr = document.getElementsByTagName("li");
23 
24                 //ulNode.appendChild(liNode);
25                 if(liNodeArr.length == 0)
26                 {
27                     ulNode.appendChild(liNode);
28                 }
29                 else
30                 {
31                     ulNode.insertBefore(liNode,liNodeArr[0]);
32                 }
33                 
34             };
35         };
36         
37     </script>
38 </head>
39 
40 <body>
41     <input id="mybtn" type="button" value="创建li"/> 
42     <input id="mytext" type="text"/>
43     <ul id="myul">
44         
45     </ul>
46 </body>
47 </html>

 

posted @ 2014-02-06 10:11  雪中飞雁  阅读(49)  评论(0)    收藏  举报