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. Java NIO浅析

    NIO(Non-blocking I/O,在Java领域,也称为New I/O),是一种同步非阻塞的I/O模型,也是I/O多路复用的基础,已经被越来越多地应用到大型应用服务器,成为解决高并发与大量连接 ...

  2. 关于SQL的相关笔记【长期更新，只发一帖】

    场景[1]多表联查时,主表与关联表同时与同一张(第三张表)有关联,类似三角恋关系- - 涉及表: HOUSE:记录了房屋信息 ROOMS:记录了房间信息 HOUSE_STATUS:记录了状态信息的中文 ...

  3. 【转】Python实现不同格式打印九九乘法表

    前言:最近在学习Python,学习资源有慕课网上的视频教程.菜鸟教程以及Python官方文档tutorial.虽然了解了Python的基本语法,但是还没有真正意义上输出自己写的代码.代码小白,之前仅学 ...

  4. radio 切换内容

    <!DOCTYPE html><html><head> <meta charset=utf-8 /> <title>test</tit ...

  5. nginx_mysql_redis配置

    #Nginx所用用户和组,window下不指定 #user nobody; #工作的子进程数量(通常等于CPU数量或者2倍于CPU) worker_processes 2; #错误日志存放路径 #er ...

  6. Android SDK升级后报错error when loading the sdk 发现了元素 d:skin 开头无效内容

    把错误位置的devices.xml这个文件删除,再把sdk里面tools\lib下的这个文件拷贝到你删除的那个文件夹里,重启eclipse

  7. Django基础，Day3 - 编写 django admin

    Django 自带了一个简易编辑后台,可以称为"内容发布器",一般是提供给站点管理员使用的,其最开始也是开发出来提供给报社编辑和发布新闻使用的. 创建超级管理员: $ python ...

  8. Redis Cluster

    使用 Redis Cluster Redis 3.0 在2015年出了Stable版本,3.0版本相对于2.8版本带来的主要新特性包括: 实现了Redis Cluster,从而做到了对集群的支持: 引 ...

  9. java初始化

    一.成员初始化 1.成员变量没有赋值,则被初始化成默认值. 2.局部变量没有赋值,编译时报错. 二.构造器初始化 1.成员变量在构造器初始化之前,已经被初始化. 2.变量定义的顺序决定了初始化的顺序. ...

  10. 输出 Office 报表

    以 word 为例: 将 word 存为 Word2003 XML,其中苹果等部分即是 xml 如下: 服务器端通常输出 HTML,HTML 是文本,XML也是文本,可以简单的套用服务器端网页的思路. ...