<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. 电脑异常断电，IDEA崩溃

    今天电脑突然断电,当时正好开着idea,等了半天无果,只能强行关机重启.重启之后,那么问题来了:重新打开idea报错java.lang.AssertionError:upexpected conten ...

  2. Python入门之实现简单的购物车功能

    Talk is cheap,Let's do this! product_list = [ ['Iphone7 Plus', 6500], ['Iphone8 ', 8200], ['MacBook ...

  3. java项目跑起来报错: 程序报 SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder". 错误

    问题: 我用的是ssm框架结合, 利用junit测试的时候抛出 SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder& ...

  4. canvas压缩图片

    1.canvas.toDataUrl压缩图片 canvas的toDataUrl方法可以将内容导出为base64编码格式的图片,采用base64编码将比源文件大1/3,但是该方法可以指定导出图片质量,所 ...

  5. windows 常用快捷键和dos命令

    快捷键 win + R 打开dos命令行窗口 win + E 打开资源管理窗口 (计算机) shift + 鼠标右击 + select 在此处打开命令窗口 可在资源管理目录下打开dos命令 windo ...

  6. 在awk中通过system调用sql语句来说明引号的使用

    一个实际应用例子: 在awk中,通过system调用连接数据库并作select操作,select语句中where条件来自于一个文件(file)的第一个域($1). $ cat file ... ... ...

  7. 剑指Offer——跳台阶

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 思路分析 这个问题可以先从简单开始考虑,台阶只有1阶,只有1种跳法,台阶有2阶,有2种跳法:一种两 ...

  8. Python3基础 list 推导式 生成100以内的偶数列表

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. 【附12】grafana配置文件

    一.配置文件位置 /usr/local/opt/grafana/share/grafana/default.ini /usr/local/etc/grafana/grafana.ini 二.init格 ...

  10. jquery 浏览器打印

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...