您的位置：首页 > 移动开发

【js】appendChild

2013-12-08 15:10 309 查看

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>

运行效果图：

<!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>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航