div节点的操作（添加，删除，替换，克隆）-蒲公英云

div节点的操作（添加，删除，替换，克隆）

<html>
    <head>
        <title></title>
        <style type="text/css">
            div{
                border: 1px solid #ff0000;
                height:100px;
                width:200px;
                margin:10px 10px;
                padding:10px 10px;
                }
            #div_1{
                background-color:#ff0000;
            }
            #div_2{
                background-color:#ffff00;
            }
            #div_3{
                background-color:#00ff00;
            }
            #div_4{
                background-color:#ff00ff;
            }
        </style>
        <script>
            /*
                添加内容到div中
            */
            function adddemo(){
            //获取第一个div节点对象
            var divNode1 = document.getElementById("div_1");
            //alert(divNode1.nodeName);
            //创建一个文本节点
            var textNode = document.createTextNode("div区域");
            //alert(textNode.nodeName);
            //将文本节点添加到div中
            divNode1.appendChild(textNode);
            //添加一个超链接
            //创建一个超链接对象
            var aNode = document.createElement("a");
            //链接地址
            aNode.href = "http://www.baidu.com";
            //链接内容
            aNode.innerText = "百度";
            //把节点对象添加到div中
            divNode1.appendChild(aNode);
            }
            /*
            删除div节点中内容
            */
            function deleteNode(){
                //获取当前节点对象
                var divNode2 = document.getElementById("div_2");
                //获取文本节点
                var textNode = divNode2.childNodes[0];
                //删除文本节点
                divNode2.removeChild(textNode);
            }
            /*
            删除节点
            */
            function deleteNode2() {
                /*
                //第一种
                //获取div节点对象
                var divNode2 = document.getElementById("div_2");
                //获取父节点
                var parentNode = divNode2.parentNode;
                //alert(parentNode.nodeName);
                parentNode.removeChild(divNode2);
                */
                //第二种
                //节点自己删除自己
                //获取节点对象
                var divNode2 = document.getElementById("div_2");
                //删除节点,参数为true时，连同子节点也一起上删除，此方法在IE中有效
                divNode2.removeNode(true);
            }
            /*
            替换节点，用来替换的div对象不存在了，用div1替换你div3
            */
            function update(){
                //获取第一个div节点对象
                var divNode1 = document.getElementById("div_1");
                //获取另一个div节点对象
                var divNode3 = document.getElementById("div_3");
                //替换节点,IE有效
                divNode3.replaceNode(divNode1);
            }
            /*
                克隆节点，原节点存在，用div3来替换div4
            */
            function clone(){
                //获取div3的节点对象
                var div3Node = document.getElementById("div_3");
                //获取div4节点对象
                var div4Node = document.getElementById("div_4");
                //复制div3,参数true复制时连同子节点也一起复制
                var div3Node2 = div3Node.cloneNode(true);
                //替换
                div4Node.replaceNode(div3Node2);
            }
        </script>
    </head>
    <body>
        <div id = "div_1">
        </div>
        <div id = "div_2">
            div区域2
        </div>
        <div id = "div_3">
            div区域3
        </div>
        <div id = "div_4">
            div区域4
        </div>
        <hr/>
        <input type="button" value="添加内容" οnclick="adddemo()" />
        <input type="button" value="删除节点内容" οnclick="deleteNode()" />
        <input type="button" value="删除节点" οnclick="deleteNode2()" />
        <input type="button" value="替换节点" οnclick="update()" />
        <input type="button" value="克隆节点" οnclick="clone()" />
    </body>
</html>