<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="添加内容" onclick="adddemo()" />

        <input type="button" value="删除节点内容" onclick="deleteNode()" />

        <input type="button" value="删除节点" onclick="deleteNode2()" />

        <input type="button" value="替换节点" onclick="update()" />

        <input type="button" value="克隆节点" onclick="clone()" />

    </body>

</html>

div节点的操作（添加，删除，替换，克隆）的更多相关文章

  1. OCR/Vote disk 维护操作: (添加/删除/替换/移动) (文档 ID 1674859.1)

    适用于: Oracle Database - Enterprise Edition - 版本 10.2.0.1 到 11.2.0.1.0 [发行版 10.2 到 11.2]本文档所含信息适用于所有平台 ...

  2. js 表格操作----添加删除

    js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...

  3. jQuery08源码 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选

    jQuery.fn.extend({ //$('ul').find('li').css('background','red'); //$('ul').find( $('li') ).css('back ...

  4. jquery17 DOM操作 : 添加 删除 获取 包装 DOM筛选

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. js节点的创建添加删除

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. jquery对类的操作,添加,删除,点击添加,再点击删除

    jquery对类的操作,添加(addClass),删除l类(remoceClass),点击添加,再点击删除(toggleClass)

  7. jquery16 DOM操作 : 添加 删除 获取 包装 DOM筛选

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  8. JavaScript对列表节点的操作：删除指定节点、删除最后一个节点、删除第一个节点、删除所有节点、增加节点

    使用菜鸟的运行环境直接测试:http://www.runoob.com/try/try.php?filename=tryjs_events <!DOCTYPE html> <html ...

  9. 用WebService实现对数据库进行操作(添加+删除+修改)（转）

    转自:http://blog.csdn.net/beyondqd/article/details/6703169 表为User,字段有 编号: int id,用户名:string UserName,密 ...

随机推荐

  1. Linux Touch命令的8种使用技巧

    Linux touch命令不仅可以用于在Linux上创建空文件. 您可以使用它来更改现有文件的时间戳,包括其访问权限和修改时间. 本文介绍了8种可以通过Linux终端使用touch命令的方案. 我们在 ...

  2. MIPI接口LCD屏调试心得（转）

    源: MIPI接口LCD屏调试心得

  3. web.xml配置详解之listener

    web.xml配置详解之listener 定义 <listener> <listener-class>nc.xyzq.listener.WebServicePublishLis ...

  4. 简单的Django实现图片上传，并存储进MySQL数据库 案例——小白

    目标:通过网页上传一张图片到Django后台,后台接收并存储进数据库 真是不容易!!这个案例的代码网上太乱,不适合我,自己摸索着写,终于成功了,记录一下,仅供自己参考,有的解释可能不对,自己明白就好, ...

  5. 20145101《Java程序设计》第8周学习总结

    20145101<Java程序设计>第8周学习总结 教材学习内容总结 第十四章 NIO与NIO2 NIO使用频道(channel)来衔接数据节点,对数据区的标记提供了clear(),rew ...

  6. 20135234mqy-——信息安全系统设计基础第五周学习总结

    程序的机器级表示 3.1 intel处理器系列俗称x86,经历了一开始个长期的,不断进化的发展过程. 开始时它是第一代单芯片,16位微处理器之一,由于当时集成电路技术水性有限,其中做了很多妥协,此后, ...

  7. NOIP Mayan游戏 - 搜索

    Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个7行5列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游戏通关是指在规定的步数内消除所有 ...

  8. soapUi在调用过程中日期参数

    中间加个T 2012-11-05T16:38:30 相关描述:

  9. Linux文件时间详解ctime、mtime、atime【转】

    本文转载自:http://blog.csdn.net/doiido/article/details/43792561 Linux系统文件有三个主要的时间属性,分别是 ctime(change time ...

  10. 【第三章】 springboot + jedisCluster

    如果使用的是redis2.x,在项目中使用客户端分片(Shard)机制.(具体使用方式:第九章 企业项目开发--分布式缓存Redis(1)  第十章 企业项目开发--分布式缓存Redis(2)) 如果 ...