动态移动dom元素
移动元素包括向左和向右移动选中的，向左和向右移动全部的
我们以下面的html代码为例：
<body>
//要移动的元素
<select multiple="multiple" size="10" id="ldatas">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
<option>选项9</option>
<option>选项10</option>
</select>
//移动的按钮
<input type="button" id="rmove" value="-->" οnclick="removeRight()"/>
<input type="button" id="rmoveAll" value="==>" οnclick="moveAllRight()"/>
<input type="button" id="lmoveOne" value="<--" οnclick="removeLeft()"/>
<input type="button" id="lmoveAll" value="<==" οnclick="moveAllLeft()"/>
//要移动的目的地
<select multiple="multiple" size="10" id="rdatas">
</select>
</body>
1．首先来看向右移动全部的代码解析：
function moveRightAll(){
//获取右移的节点对象
var lrmoveAllNode = get("rmoveAll");
//添加事件
rmoveAll.onclick = function(){
//select节点的获取
var ldataNode = get("ldatas");
//获取该节点下面的所有的option节点对象
var loptionsNode = ldataNode.getElementsByTagName("option");
//获取要添加到的节点对象
var rdatasNode = get("rdatas");
//如果把loptionsNode.length放到for中是变值
var lengths = loptionsNode.length;//定值
for(var i = 0;i<lengths;i++){
//把ldatasNode 个数10 始终移第一个
rdatasNode.appendChild(loptionsNode[0]);
}
}
}.
2. 向左移动全部的元素节点：
//向左移动全部节点
function moveAllLeft(){
var lmoveAllNode = get("lmoveAll");
lmoveAllNode.onclick = function(){
//获取左移节点的对象
var rdataNode = get("rdatas");
//获取左移的所有的option节点
var roptionsNode = rdataNode.getElementsByTagName("option");
//获取左边的节点对象
var ldatasNode = get("ldatas");
var lengths = roptionsNode.length;//定值
for (var i = 0; i < lengths; i++) {
//把ldatasNode 个数10 始终移第一个
ldatasNode.appendChild(roptionsNode[0]);
}
}
}
3.单向向右移动
//向右移动全部节点
function moveAllRight(){
//获取右移的节点对象
var lrmoveAllNode = get("rmoveAll");
//添加事件
rmoveAll.onclick = function(){
//select节点的获取
var ldataNode = get("ldatas");
//获取该节点下面的所有的option节点对象
var loptionsNode = ldataNode.getElementsByTagName("option");
//获取要添加到的节点对象
var rdatasNode = get("rdatas");
//如果
//如果把loptionsNode.length放到for中是变值
var lengths = loptionsNode.length;//定值
for (var i = 0; i < lengths; i++) {
//把ldatasNode 个数10 始终移第一个
rdatasNode.appendChild(loptionsNode[0]);
}
}
}
4．单向向左移动
function removeLeft(){
//往左移
var rmoveNode = get("lmoveOne");
rmoveNode.onclick = function(){
//获取右边节点中的所有的option
var rdatasNode = get("rdatas");
//获取option对象
var loptionsNode = rdatasNode.getElementsByTagName("option");
//获取左边节点
var ldatasNode = get("ldatas");
for (var i = 0; i < loptionsNode.length; i++) {
if (loptionsNode[i].selected) {
ldatasNode.appendChild(loptionsNode[i]);
i--;
}
}
}
}