节点的创建,追加,删除,替换

# 节点的创建 # 

            获取父对象
            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=" 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=" 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="右移"/>