appendChild主要是用来追加节点插入到最后；循环的时候由于不停的搬家导致length在改变。
使用for循环
<!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <link REL="SHORTCUT ICON" HREF="favicon.ico" type="image/x-icon" /> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <meta http-equiv=X-UA-Compatible content=IE=EmulateIE7> <title>【js】appendChild </title> <style type="text/css"> </style> <script type="text/javascript"> window.onload = function(){ var ul2 = document.getElementById('ul2'); var oli = document.getElementById('ul1').children; for(var i=0;i<oli.length;i++){ //alert("former:"+oli.length); ul2.appendChild(oli[i]); //alert("latter:"+oli.length); } } </script> </head> <body> <h3>将Id为ul1的内容插入到ul2里面</h3> <ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <ul id="ul2"> <li>ul2</li> </ul> </body> </html>
运行效果图：
使用while循环
window.onload = function(){ var ul2 = document.getElementById('ul2'); var oli = document.getElementById('ul1').children; while(oli.length){ //alert("former:"+oli.length); ul2.appendChild(oli[0]); //alert("latter:"+oli.length); } }
运行效果图：
while和for循环差生不同结果的原因：
是因为循环的时候，由于不停的搬家导致数组在改变，在用for循环的时候，每次appendChild()的时候，数组减少，但是变量i却还在增加，所以导致出现效果一的情况；而while循环的时候就不一样了，该循环可以取出数组中的全部内容。
例子：左右列表选择的js实现：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 3 <html xml="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>Select Page</title> 6 <meta http-equiv=Content-Type content="text/html;charset=utf-8"> 7 <meta http-equiv=X-UA-Compatible content=IE=EmulateIE7> 8 <style type="text/css"> 9 * {font-family:Tahoma,Arial,serif;font-size:11pt;line-height:25px;} 10 body {text-align:center;min-width:760px;} 11 #main {width:720px;margin:0 auto;text-align:left;} 12 #main div {width:30%;display:inline;} 13 #main div input {position:absolute;left:500px;} 14 p {text-indent:2em;} 15 select {width:120px;} 16 </style> 17 <script type="text/javascript"> 18 //右移 19 function moveRight(){ 20 //左侧列表框 21 var leftSel=$("left"); 22 //右侧列表框 23 var rightSel=$("right"); 24 //左侧列表框的选项集合 25 var options=leftSel.options; 26 //遍历所有的选中的选项 27 for(var i=0;i<options.length;i++){ 28 //选中项 29 if(options[i].selected){ 30 //将选项移动到右侧列表框中 31 rightSel.appendChild(options[i]); 32 i--; 33 } 34 } 35 } 36 function $(id){ 37 return document.getElementById(id); 38 } 39 //左移 40 function moveLeft(){ 41 //左侧列表框 42 var leftSel=$("left"); 43 //右侧列表框 44 var rightSel=$("right"); 45 //右侧列表框的选项集合 46 var options=rightSel.options; 47 //遍历所有的选中的选项 48 for(var i=0;i<options.length;i++){ 49 //选中项 50 if(options[i].selected){ 51 //将选项移动到左侧列表框中 52 leftSel.appendChild(options[i]); 53 i--; 54 } 55 } 56 } 57 //全部右移 58 function moveRightAll(){ 59 //左侧列表 60 var leftSel=$("left"); 61 //右侧列表 62 var rightSel=$("right"); 63 //将所有左侧选项移动到右侧 64 while(leftSel.options.length>0){ 65 rightSel.appendChild(leftSel.options[0]); 66 } 67 } 68 //全部左移 69 function moveLeftAll(){ 70 //左侧列表 71 var leftSel=$("left"); 72 //右侧列表 73 var rightSel=$("right"); 74 //将所有右侧选项移动到左侧 75 while(rightSel.options.length>0){ 76 leftSel.appendChild(rightSel.options[0]); 77 } 78 } 79 </script> 80 </head> 81 <body> 82 <div id="main"> 83 <div> 84 <select id="left" size="10" multiple="multiple"> 85 <option value="a">选项A</option> 86 <option value="b">选项B</option> 87 <option value="c">选项C</option> 88 <option value="d">选项D</option> 89 <option value="e">选项E</option> 90 <option value="f">选项F</option> 91 </select> 92 </div> 93 <div> 94 <input type="button" value="右移" style="top:20px;" onclick="moveRight()"/> 95 <input type="button" value="左移" style="top:70px;" onclick="moveLeft()"/> 96 <input type="button" value="全部右移" style="top:120px;" onclick="moveRightAll()"/> 97 <input type="button" value="全部左移" style="top:170px;" onclick="moveLeftAll()"/> 98 </div> 99 <div style="left:100px;position:relative;"> 100 <div> 101 <select id="right" size="10" multiple="multiple"> 102 </select> 103 </div> 104 </div> 105 </div> 106 </body> 107 </html>