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>

　　

js 与 jq 的节点添加删除实例的更多相关文章

  1. JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作

    html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...

  2. JS中的数组，添加删除元素,判断是否存在一个值的方法总结

    一.添加元素: 1:在最后添加,返回数组长度:arr.push(...); 2:在最前面添加,返回数组长度:arr.unshift(...); 3:在指定位置添加,没有返回值:arr[i] = xxx ...

  3. js对table操作（添加删除交换上下TR）

    <table width="100%" border="0" cellpadding="2" cellspacing="1& ...

  4. jQuery选择器(添加节点及删除节点及克隆及替换及包装)第九节

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  6. ORACLE 11gR2 RAC添加删除（正常及强制）节点操作步骤（删除篇）

    ORACLE 11gR2 RAC添加删除(正常及强制)节点操作步骤(删除篇) 本文主要转载 [  http://www.cnxdug.org/?p=2511 ] 有部分细节自己实验添加,再此谢谢前辈. ...

  7. Mongodb 3.6 副本集测试及添加删除节点等操作

    下载tar包并安装curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-3.6.8.tgz [root@mysqlt ...

  8. mongodb replica set 添加/删除节点方法--http://www.ii123.com/jc/bc/bczh/258948.html

    replica set多服务器主从,添加,删除节点,肯定会经常遇到的.下面详细说明一下,添加,删除节点的2种方法. 一,利用rs.reconfig,来添加,删除节点 1,添加节点  代码如下   re ...

  9. zookeeper动态添加/删除集群中实例(zookeeper 3.6)

    一,用来作为demo操作的zookeeper集群中的实例: 机器名:zk1 server.1=172.18.1.1:2888:3888 机器名:zk2 server.2=172.18.1.2:2888 ...

随机推荐

  1. project.pbxproj 的merge问题

    基于xcode8.0 1.project.pbxproj 的结构 内部文件{archiveVersion=1 ; classes={};objectVersion=46;objects={};root ...

  2. cocos2d-x-2.2.6 project-creator文件夹下python.bat

    @echo off set /p projectName=请输入项目名称: if "%projectName%"=="" goto inputError set ...

  3. win7里边使用telnet命令为什么提示telnet不是内部或外部命令，也不是可运行的程序或批处理文件

    Win7默认没有安装telnet功能,所以你直接用telnet命令是用不了的:你可以去“控制面板”-->“程序”(在左下角)--->“打开或关闭Windows功能”,勾上“telnet客户 ...

  4. thinkphp3.2.3中U()方法和redirect()方法区别

    今天博主看3.1的教程,学着3.2,就遇到了这个坑,怎么就是不跳转呢,很纳闷!! 在thinkphp3.1 中 U()方法是可以执行跳转的(看视频教程里面是可以的,博主没有测试过). 但是在think ...

  5. 数据存储_FMDB

    一.简单说明 1.什么是FMDB FMDB是iOS平台的SQLite数据库框架 FMDB以OC的方式封装了SQLite的C语言API 2.FMDB的优点 使用起来更加面向对象,省去了很多麻烦.冗余的C ...

  6. zen Code 支持的代码样式

    这里是一个支持的属性和操作符的列表: E 元素名称(div, p); E#id 使用id的元素(div#content, p#intro, span#error); E.class 使用类的元素(di ...

  7. BAYSY2 的LVDS引脚 笔记

    差分引脚标号说明: 'L' 代表该引脚属于差分引脚 'xx' 两位整型数,在每一 bank 的独特标记 'y' 表示正向 还是 反向,同时要注意输入输出方向 ‘#’ 0~3,代表 bank0~bank ...

  8. 阿里笔试题：在n个人中找明星

    题目描述:有N个人,其中一个明星和n-1个群众,群众都认识明星,明星不认识任何群众,群众和群众之间的认识关系不知道,现在如果你是机器人R2T2,你每次问一个人是否认识另外一个人的代价为O(1),试设计 ...

  9. 一款强大的Android网络渗透软件dsploit

    dSploit是一款基于Android系统的功能十分全面强大的网络渗透工具,可以提供给网络安全工作人员检查网络的安全性.小黑这次主要使用了其中的"简易嗅探""会话劫持&q ...

  10. 解决Myeclipse PermGen space问题

    myeclipse配置web服务器配置 Window—Preferences—Myeclipse—Servers—tomcat JDK的Optional Java VM arguments配置为:-X ...