<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. STM32f103C8T6 Bootloader设计（转）

    源:STM32f103C8T6 Bootloader设计 STM32F103c8t6通过串口实现IAP在线升级固件

  2. gcc5.2版本安装详解

    gcc5.2版本安装详解 1.下载gcc-5.2安装包 gcc各版本浏览地址:http://ftp.gnu.org/gnu/gcc/gcc-5.2浏览地址:http://ftp.gnu.org/gnu ...

  3. 20145105 《Java程序设计》实验二总结

    实验二 Java面向对象程序设计 一. 实验内容: 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.多态.建模 初步掌握UML 熟悉S.O.L.I.D原则 了解设计模式 二. 实验步骤 (一 ...

  4. 20145322 Exp5 利用nmap扫描

    20145322 Exp5 利用nmap扫描 实验过程 使用命令创建一个msf所需的数据库 service postgresql start msfdb start 使用命令msfconsole开启m ...

  5. 20145328 《网络对抗技术》MSF基础应用

    20145328 <网络对抗技术>MSF基础应用 --------------先提交,后续完成------------------

  6. 20145334赵文豪《网络攻防》 MSF基础应用

    实践目标 掌握metasploit的基本应用方式 掌握常用的三种攻击方式的思路. 实验要求 一个主动攻击,如ms08_067 一个针对浏览器的攻击,如ms11_050 一个针对客户端的攻击,如Adob ...

  7. Python3基础 __doc__ 单行与多行函数文档

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

  8. Spring通过ApplicationContext主动获取bean

    有些场景无法通过AutoWired和compoment注解传递进来,于是希望通过Spring context主动去获取beandemo: package com.qhong.Util; import ...

  9. Cent OS 常用配置命令

    1.ifconfig   #查看网络接口状态 2.ifconfig –a  #查看主机所有接口的情况 3.ifconfig eth0 192.168.1.106 netmask 255.255.255 ...

  10. 用jQuery实现ajax总结以及跨域问题

    本文为作者原创,未经博主允许,不可转载 ajax请求的常用的参数设置: type:请求类型,"POST","GET",默认为geturl:发送请求的地址data ...