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实现：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">

  <html xml="http://www.w3.org/1999/xhtml">

  <head>

     <title>Select Page</title>

     <meta http-equiv=Content-Type content="text/html;charset=utf-8">

     <meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>

     <style type="text/css">

         * {font-family:Tahoma,Arial,serif;font-size:11pt;line-height:25px;}

         body {text-align:center;min-width:760px;}

         #main {width:720px;margin:0 auto;text-align:left;}

         #main div {width:30%;display:inline;}

         #main div input {position:absolute;left:500px;}

         p {text-indent:2em;}

         select {width:120px;}

     </style>

     <script type="text/javascript">

         //右移

         function moveRight(){

             //左侧列表框

             var leftSel=$("left");

             //右侧列表框

             var rightSel=$("right");

             //左侧列表框的选项集合

             var options=leftSel.options;

             //遍历所有的选中的选项

             for(var i=0;i<options.length;i++){

                 //选中项

                 if(options[i].selected){

                     //将选项移动到右侧列表框中

                     rightSel.appendChild(options[i]);

                     i--;

                 }

             }

         }

         function $(id){

             return document.getElementById(id);

         }

         //左移

         function moveLeft(){

             //左侧列表框

             var leftSel=$("left");

             //右侧列表框

             var rightSel=$("right");

             //右侧列表框的选项集合

             var options=rightSel.options;

             //遍历所有的选中的选项

             for(var i=0;i<options.length;i++){

                 //选中项

                 if(options[i].selected){

                     //将选项移动到左侧列表框中

                     leftSel.appendChild(options[i]);

                     i--;

                 }

             }

         }

         //全部右移

         function moveRightAll(){

             //左侧列表

             var leftSel=$("left");

             //右侧列表

             var rightSel=$("right");

             //将所有左侧选项移动到右侧

             while(leftSel.options.length>0){

                 rightSel.appendChild(leftSel.options[0]);

             }

         }

         //全部左移

         function moveLeftAll(){

             //左侧列表

             var leftSel=$("left");

             //右侧列表

             var rightSel=$("right");

             //将所有右侧选项移动到左侧

             while(rightSel.options.length>0){

                 leftSel.appendChild(rightSel.options[0]);

             }

         }

     </script>

 </head>

 <body>

     <div id="main">

         <div>

             <select id="left" size="10" multiple="multiple">

              <option value="a">选项A</option>

              <option value="b">选项B</option>

              <option value="c">选项C</option>

              <option value="d">选项D</option>

              <option value="e">选项E</option>

              <option value="f">选项F</option>

             </select>

         </div>

         <div>

             <input type="button" value="右移" style="top:20px;" onclick="moveRight()"/>

             <input type="button" value="左移" style="top:70px;" onclick="moveLeft()"/>

             <input type="button" value="全部右移" style="top:120px;" onclick="moveRightAll()"/>

             <input type="button" value="全部左移" style="top:170px;" onclick="moveLeftAll()"/>

         </div>

         <div style="left:100px;position:relative;">

             <div>

                 <select id="right" size="10" multiple="multiple">

                 </select>

             </div>

         </div>

     </div>

 </body>

 </html>

【js】appendChild的更多相关文章

  1. 【JS】AJAX跨域-被调用方与调用方解决方案（二）

    解决跨域问题 跨域问题说明,参考[JS]AJAX跨域-JSONP解决方案(一) 实例,使用上一章([JS]AJAX跨域-JSONP解决方案(一))的实例 解决方案三(被调用方支持跨域-服务端代码解决) ...

  2. 【js】Leetcode每日一题-制作m束花所需的最少天数

    [js]Leetcode每日一题-制作m束花所需的最少天数 [题目描述] 给你一个整数数组 bloomDay,以及两个整数 m 和 k . 现需要制作 m 束花.制作花束时,需要使用花园中 相邻的 k ...

  3. 【js】Leetcode每日一题-完成所有工作的最短时间

    [js]Leetcode每日一题-完成所有工作的最短时间 [题目描述] 给你一个整数数组 jobs ,其中 jobs[i] 是完成第 i 项工作要花费的时间. 请你将这些工作分配给 k 位工人.所有工 ...

  4. 【js】Leetcode每日一题-数组异或操作

    [js]Leetcode每日一题-数组异或操作 [题目描述] 给你两个整数,n 和 start . 数组 nums 定义为:nums[i] = start + 2*i(下标从 0 开始)且 n == ...

  5. 【js】Leetcode每日一题-解码异或后数组

    [js]Leetcode每日一题-解码异或后数组 [题目描述] 未知 整数数组 arr 由 n 个非负整数组成. 经编码后变为长度为 n - 1 的另一个整数数组 encoded ,其中 encode ...

  6. 【js】Leetcode每日一题-叶子相似的树

    [js]Leetcode每日一题-叶子相似的树 [题目描述] 请考虑一棵二叉树上所有的叶子,这些叶子的值按从左到右的顺序排列形成一个 叶值序列 . 举个例子,如上图所示,给定一棵叶值序列为 (6, 7 ...

  7. 【js】Leetcode每日一题-子数组异或查询

    [js]Leetcode每日一题-子数组异或查询 [题目描述] 有一个正整数数组 arr,现给你一个对应的查询数组 queries,其中 queries[i] = [Li, Ri]. 对于每个查询 i ...

  8. 【js】Leetcode每日一题-停在原地的方案数

    [js]Leetcode每日一题-停在原地的方案数 [题目描述] 有一个长度为 arrLen 的数组,开始有一个指针在索引 0 处. 每一步操作中,你可以将指针向左或向右移动 1 步,或者停在原地(指 ...

  9. 【js】Leetcode每日一题-二叉树的堂兄弟节点

    [js]Leetcode每日一题-二叉树的堂兄弟节点 [题目描述] 在二叉树中,根节点位于深度 0 处,每个深度为 k 的节点的子节点位于深度 k+1 处. 如果二叉树的两个节点深度相同,但 父节点不 ...

随机推荐

  1. c# winform编程之多线程ui界面资源修改总结篇【转】

    c# winform编程之多线程ui界面资源修改总结篇 单线程的winfom程序中,设置一个控件的值是很easy的事情,直接 this.TextBox1.value = "Hello Wor ...

  2. 什么是'脑分裂(split brain)'?

    这个词明显有点恐怖.设想一下,如果某时刻连接两个控制器之间的通路出现了问题,而不是其中某个控制器死机,此时两个控制器其实都是工作正常的,但是两者都检测不到对方的存在,所以两者都尝试接管所有总线,这时候 ...

  3. CREATE DATABASE failed

    由于环境需要, 故修改SQL Server 2012的默认的数据库的数据文件和日志文件的位置. 如下: 创建数据库, 遭遇报错. 错误信息: A file activation error occur ...

  4. Android中的树状(tree)列表

    树状列表前端挺常用的,还有人专门写过Ztree,Android中有的时候也需要使用到树状列表,上篇文章写了一下ExpandableListView,ExpandableListView最多支持两级结构 ...

  5. BigDecimal 小数 浮点数 精度 财务计算

    简介 float和double类型的使用局限: 单精度浮点型变量float可以处理6~7位有效数,双精度浮点型变量double可以处理15~16位有效数,在实际应用中,如果需要对更大或者更小的数进行运 ...

  6. Android 如何去掉手机中横竖屏切换时的转屏动画？

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  7. CoCreateInstance(转)

      CoCreateInstance  创建组件的最简单的方法是使用CoCreateInstance函数. 在COM库中包含一个用于创建组件的名为CoCreateInstance的函数.此函数需要一个 ...

  8. 【iOS】网络操作与AFNetworking

    众所周知.苹果搞的一套框架NSContention发送请求与接收请求的方式十分繁琐.操作起来非常不方便. 不仅要做区分各种请求设置各种不同的參数,并且还要常常在多线程里操作,同一时候还要对请求与返回的 ...

  9. C#.NET常见问题(FAQ)-list比数组效率低多少

    对于List,即长度不确定的数组而言,十万笔数据*12倍,就是120万笔数据,只需要93ms左右   换成了二维数组,效果也是差不多,78ms,可见list的效率只比double差一点点     更多 ...

  10. 翻译记忆软件-塔多思TRADO经典教程_5

    TRADOS新手必读 共有篇贴子 TRADOS新手必读   译海撷英系列之软件漫谈之TRADOS新手必读 作者:苏任 我很喜欢到翻译中国网站上来四处看看,一开始主要是关心应用资料和软件,后来就对网友的 ...