動態移動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--;
}
}
}
}