js 与 jq 的节点添加删除实例

JavaScript实例:XML DOM节点的添加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>JavaScript实例</title>
        <style>
           #did{width:400px;height:300px;border:1px solid #ddd;}
           img{border:2px solid #fff;}
           img:hover,#mid{border:2px solid red;}
        </style>
    </head>
    <body>
        <!-- html注释 -->
        <h2>JavaScript实例:XML DOM节点的添加</h2>
        <div id="did"></div>
        <img src="./images/66.jpg" width="70"/>
        <img src="./images/77.jpg" width="70"/>
        <img src="./images/88.jpg" width="70"/>
        <img src="./images/99.jpg" width="70"/><br/><br/>
        <button onclick="dofun(1)">前添加</button>
        <button onclick="dofun(2)">后追加</button>
        <button onclick="dofun(3)">前删除</button>
        <button onclick="dofun(4)">后删除</button>
        <button onclick="dofun(5)">替换</button>
        <script type="text/javascript">
           //获取上面的图片并添加点击事件
           var list = document.getElementsByTagName("img");
           for(var i=0;i<list.length;i++){
                list[i].onclick = function(){
                    this.setAttribute("id","mid");
                }
           }

           //处理函数
           function dofun(m){
                //获取div和要处理的图片
                var did = document.getElementById("did");
                var mid = document.getElementById("mid");
                if(mid!==null){
                    //删除mid的id属性节点
                    mid.removeAttribute("id");
                    //克隆mid节点
                    var ob = mid.cloneNode();
                }
                //根据产生m的值执行对应的操作
                switch(m){
                    case 1: //前添加
                        did.insertBefore(ob,did.firstChild); break;
                    case 2: //后添加
                        did.appendChild(ob); break;
                    case 3: //前删除
                        did.removeChild(did.firstChild); break;
                    case 4: //后删除
                        did.removeChild(did.lastChild); break;
                    case 5:
                        did.replaceChild(ob,did.lastChild); break;
               }
           }
        </script>
    </body>
</html>

　　

jQuery实例:节点添加操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>jQuery实例</title>
        <style>
            #did{width:400px;height:300px;border:1px solid #ddd;}
            img{border:2px solid #fff;}
            img:hover{border:2px solid #f0c;}
            img.hover{border:2px solid #f00;}
        </style>
        <script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            //jQuery的入口程序
            $(function(){
                //获取mid中的所有img并绑定鼠标点击事件
                $("#mid img").click(function(){
                    //取消所有选中
                    $("#mid img").removeClass("hover");
                    //添加属性
                    $(this).addClass("hover");
                });

                //获取所有按钮并添加点击事件
                $("button").click(function(){
                    //根据按钮上的字执行对应的操作
                    switch($(this).html()){
                        case "前添加":
                            //获取选中的图片克隆后添加到did中间
                            $("#mid img.hover").removeClass("hover").clone().prependTo("#did");
							//$("#did").prepend($("#mid img.hover"));
                            break;
                        case "后添加":
                            //后添加
                            $("#mid img.hover").removeClass("hover").clone().appendTo("#did");
                            break;
                        case "前删除":
                            $("#did img:first").remove();
                            break;
                        case "后删除":
                            $("#did img:last").remove();
                            break;
                    }
                });
            });
        </script>
    </head>
    <body>
        <h2>jQuery实例:节点添加操作</h2>
        <div id="did" style="width:400px;height:300px;border:1px solid #ddd"></div><br/><br/>
        <div id="mid">
            <img src="./images/1.jpg" width="70"/>
            <img src="./images/2.jpg" width="70"/>
            <img src="./images/3.jpg" width="70"/>
            <img src="./images/4.jpg" width="70"/>
        </div>
        <br/>
        <button>前添加</button>
        <button>后添加</button>
        <button>前删除</button>
        <button>后删除</button>
    </body>
</html>