【js】appendChild

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>

View Code