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

时间：2023-12-15 09:49:44

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>

　　

相关文章