节点的创建,追加,删除,替换
# 节点的创建 #
获取父对象
var div = document.getElementById("div");
var p = document.getElementById("p");
增加节点的标签名
var a = document.createElement("a");
增加节点的属性
a.href="http://www.baidu.com";
增加节点的文本结点内容
var text = document.createTextNode("跳转");
或者 a.innerHTML="跳转";
a.appendChild(text);
把节点a添加到父对象的最后一个元素
div.appendChild(a);
# 追加节点 #
div为父对象 把对象a插入到p对象之前
div.insertBefore(a,p);
# 删除节点 #
div.removeChild(p);
# 替换节点 #
把p 替换成 a
div.replaceChild(a,p);
# 使用节点知识来弹出div框练习 #
点击一个注册按钮,弹出一个div,还可以关闭,注意:如何解决打开多个,必须关闭多个的问题
获取父对象
var div = document.getElementById("div");
var p = document.getElementById("p");
增加节点的标签名
var a = document.createElement("a");
增加节点的属性
a.href="http://www.baidu.com";
增加节点的文本结点内容
var text = document.createTextNode("跳转");
或者 a.innerHTML="跳转";
a.appendChild(text);
把节点a添加到父对象的最后一个元素
div.appendChild(a);
# 追加节点 #
div为父对象 把对象a插入到p对象之前
div.insertBefore(a,p);
# 删除节点 #
div.removeChild(p);
# 替换节点 #
把p 替换成 a
div.replaceChild(a,p);
# 使用节点知识来弹出div框练习 #
点击一个注册按钮,弹出一个div,还可以关闭,注意:如何解决打开多个,必须关闭多个的问题
var button = document.getElementById("button");
var div = null;
button.onclick=function(){
if(!div){
div = document.createElement("div");
}else {
return 0;
}
div.style.height = "300px";
div.style.width = "500px";
div.style.border = "2px solid red";
div.style.backgroundColor = "gray";
div.style.position = "absolute";
div.style.top = "150px";
div.style.left = (parseInt(window.innerWidth || window.documentElement.clientWidth)-500)/2+"px";
document.body.appendChild(div);
var a = document.createElement("a");
a.innerHTML="X";
a.style.float="right";
a.style.padding = "5px";
a.style.cursor = "pointer";
div.appendChild(a);
a.onclick=function(){
document.body.removeChild(div);
div = null;
}
}
# 实现上移 下移 右移功能 #
var select = document.getElementById("select");
var select2 = document.getElementById("select2");
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");
var id;
select.onfocus = select2.onfocus = function(){
id = this.id;
}
button1.onclick=function(){
if(id == "select"){
a(select);
}else if(id == "select2"){
a(select2);
}
}
function a(obj){
for (var i = 1;i < obj.options.length;i++){
if(obj.options[i].selected){
var a = obj.options[i];
obj.removeChild(a);
obj.insertBefore(a,obj.options[i-1]);
}
}
}
button2.onclick=function(){
if(id == "select"){
b(select);
}else if(id == "select2"){
b(select2);
}
}
function b(obj){
for (var i = obj.options.length-2;i>=0 ;i--){
if(obj.options[i].selected){
var a = obj.options[i];
obj.removeChild(a);
obj.insertBefore(a,obj.options[i+1]);
}
}
}
button3.onclick=function(){
var arr = [];
for (var i = 0;i < select.options.length;i++){
if(select.options[i].selected){
arr.push(select.options[i]);
}
}
for(var j= 0;j<arr.length;j++){
select2.appendChild(arr[j]);
}
}
---------------------------------------------------
<select name="" style="width: 150px;height: 200px" id="select" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select style="width: 150px;height: 200px" name="" id="select2" multiple="multiple">
</select>
<br/>
<input id="button1" type="button" value="上移"/>
<input id="button2" type="button" value="下移"/>
<input id="button3" type="button" value="右移"/>