<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. Redis 如何正确实现分布式锁

    前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...

  2. Linux启动vi编辑器时提示E325: ATTENTION解决方案

    Linux启动vi编辑器时提示E325: ATTENTION解决方案 Vi编辑器是Linux的文本编辑器,在Linux系统的运用非常广泛,不少朋友在打开Vi编辑器的时候提示E325: ATTENTIO ...

  3. Codeforces Round #429 (Div. 2)

    A. Generous Kefa   One day Kefa found n baloons. For convenience, we denote color of i-th baloon as  ...

  4. C#调用系统蜂鸣(需要发出警告时挺好用的 即使没有声卡)

    http://heavenslv.iteye.com/blog/1033870 // 声明 public class BeepUp { /// <param name="iFreque ...

  5. C#学习笔记（十）：函数和参数

    函数 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syste ...

  6. json库的编译方法和vs2010中导入第三方库的方法

    json库的编译方法和vs2010中导入第三方库的方法 一.去相应官网下载json.cpp文件 Jsoncpp下载:https://sourceforge.net/projects/jsoncpp/  ...

  7. Web前端代码规范

    新增:http://materliu.github.io/code-guide/#project-naming HTML 原则1.规范 .保证您的代码规范,保证结构表现行为相互分离.2.简洁.保证代码 ...

  8. poj 2385 Apple Catching 基础dp

    Apple Catching   Description It is a little known fact that cows love apples. Farmer John has two ap ...

  9. python 元组元素计数

    #create a tuple tuplex = , , , , , , , , print(tuplex) #return the number of times it appears in the ...

  10. sqlserver 存入DB中的中文乱码

    在war包中的appliation.properties中,配置的数据库连接做了修改,也不知道当初为什么这么改 导致存入DB中的中文是??? testaaa.jdbc.type=mssqltestaa ...