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. seqgan leakgan

    seqgan https://blog.csdn.net/yinruiyang94/article/details/77675586 leakgan https://www.leiphone.com/ ...

  2. 查询分页-----强势top

    查询分页:语句1性能提升10倍多,仅仅是由于多了个topkeyword,非常不理解啊!!!! 1.查询时间1s内,r_object_id主键 select top 100 * from (  sele ...

  3. (转)NGUI制作转圈的技能CD特效

    在技能图标上面放个半透明的精灵,用来做技能冷却的特效,如下图所示,我就用NGUI中的图标来带代替. NGUI制作转圈的技能CD特效 然后修改一下特效的精灵类型,它是在技能图标上面悬浮半透明可旋转的精灵 ...

  4. Learning How To Code Neural Networks

    原文:https://medium.com/learning-new-stuff/how-to-learn-neural-networks-758b78f2736e#.ly5wpz44d This i ...

  5. 宏定义偷懒型set,get

    之前看到有这么一个写法 #define DEF_SET_GET(varType,varName,funName) \ private : varType varName; \ public : voi ...

  6. js的正则匹配 和 blur

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js&qu ...

  7. c的链接详解

    多目标文件的链接 stack.c #include <stdio.h> #define STACKSIZE 1000 typedef struct stack { int data[STA ...

  8. 子查询二(在HAVING子句中使用子查询)

    HAVING子句的主要功能是对分组后的数据进行过滤,如果子查询在HAVING中表示要进行分组过滤,一般返回单行单列的数据 示例一.查询部门编号,人数,平均工资,并且要求这些部门的平均工资高于公司的平均 ...

  9. java之八大排序

    的关系:  1.直接插入排序 (1)基本思想:在要排序的一组数中,假设前面(n-1)[n>=2] 个数已经是排 好顺序的,现在要把第n个数插到前面的有序数中,使得这n个数 也是排好顺序的.如此反 ...

  10. js replace 如何替换字符串中的最后一个匹配项

    1.正则表达时,贪婪模式,.*会一直匹配到最后一个 // 验证 let str = "123[空]345[空]789[空]0"; let res = str.replace(/(. ...