appendChild和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" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <div id="test">
 9         <p id="p1"></p>
10         <p id="p3"></p>
11         <p id="p4"></p>
12     </div>
13     <script type="text/javascript">
14     var oTest = document.getElementById('test');
15     var oP1 = document.getElementById('p1');
16     var oP3 = document.getElementById('p3');
17     var oP4 = document.getElementById('p4');
18 
19     var oP2 = document.createElement('p');
20     oP2.setAttribute('id','p2');
21     oP2.appendChild(document.createTextNode("Hello world!"));
22 
23     //appendChild无法设置想要插入的明确位置
24     //oTest.appendChild(oP2);
25 
26     //insertBefore则可以设置
27     //oTest.insertBefore(oP2,null);
28     //oTest.insertBefore(oP2,oP1);
29     //oTest.insertBefore(oP2,oP1.nextSibling);
30     //oTest.insertBefore(oP2,oP3.previousSibling);
31     //oTest.insertBefore(oP2,oTest.childNodes[0]);
32     </script>
33 </body>
34 </html>
posted @ 2012-06-27 15:09  小猩猩君  阅读(658)  评论(0编辑  收藏  举报