DOM2练习
Posted 张大哒
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM2练习相关的知识，希望对你有一定的参考价值。
左右互相输入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
select{
width: 60px;
}
</style>
</head>
<body>
<select id="s1" size="7" multiple="multiple">
<option>123</option>
<option>456</option>
<option>789</option>
</select>
<input type="button" value="向 右" id="btn-r" />
<input type="button" value="向 左" id="btn-l" />
<select id="s2" size="7" multiple="multiple">
<option>abc</option>
<option>xyz</option>
<option>ijk</option>
</select>
</body>
</html>
<script>
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var btn_r = document.getElementById("btn-r");
var btn_l = document.getElementById("btn-l");
btn_r.onclick = function(){
s2.appendChild(s1.selectedOptions[0]);
}
btn_l.onclick = function(){
s1.appendChild(s2.selectedOptions[0]);
}
</script>
可多项选择左右互取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
select{
width: 60px;
}
</style>
</head>
<body>
<select id="s1" size="7" multiple="multiple">
<option>123</option>
<option>456</option>
<option>789</option>
</select>
<input type="button" value="向 右" id="btn-r" />
<input type="button" value="向 左" id="btn-l" />
<select id="s2" size="7" multiple="multiple">
<option>abc</option>
<option>xyz</option>
<option>ijk</option>
</select>
</body>
</html>
<script>
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var btn_r = document.getElementById("btn-r");
var btn_l = document.getElementById("btn-l");
btn_r.onclick = function(){
for(var a = 0;true;a++){
s2.appendChild(s1.selectedOptions[0]);
}
}
btn_l.onclick = function(){
for(var b = 0;true;b++){
s1.appendChild(s2.selectedOptions[0]);
}
}
</script>
以上是关于DOM2练习的主要内容，如果未能解决你的问题，请参考以下文章
web前端练习26----Dom2,节点的 创建添加，删除，替换，克隆，innerHTML，innerText，显示隐藏及练习