<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. Python入门之Python Colorama模块

    Python的Colorama模块,可以跨多终端,显示字体不同的颜色和背景,只需要导入colorama模块即可,不用再每次都像linux一样指定颜色: 官方参考:https://pypi.org/pr ...

  2. Android 手机小闹钟

    Android 手机小闹钟 一.这一篇主要使用系统为我们提供的一个服务AlarmManager来制作一个Android小闹钟,同时还涉及到了自定义主题.判断第一次启动应用.自定义动画.对话框.制作关闭 ...

  3. Windows10 蓝屏 DRIVER_IRQL_NOT_LESS_OR_EQUAL (vfilter.sys)的可能解决方法

    早上我的笔记本从休眠中开机的时候突然出现了蓝屏,这个蓝屏在前几天出现过了.两次提示的终止代码都一样.我的笔记本型号是DELL XPS15 9560 我的笔记本配置: 类别 型号 内存 16GB DDR ...

  4. CSS3实现小黄人动画

    转载请注明出处,谢谢! 每次看到CSS3动画就心痒痒想试一下,记得一个多月前看了白树哥哥的一篇博客,突然开窍,于是拿他提供的demo试了一下,感觉很棒!下图为demo提供的动画帧设计稿. 自己也想说搞 ...

  5. Spring Boot + thymeleaf 实现文件上传下载

    参考博客:https://juejin.im/post/5a326dcaf265da431048685e 技术选型:spring boot 2.1.1+thymeleaf+maven 码云地址:htt ...

  6. DSDS，双模，双卡，双待，单待，双通，单通，概念及相互关系？【转】

    本文转载自:https://blog.csdn.net/dirk_it/article/details/7178058?utm_source=blogxgwz9 DSDS:双卡双待 DualSimDu ...

  7. 用Python为iOS和Android写跨平台的应用

    首先保证安装了最新的python(当前安装的是python3.6) 一.安装Kivy :python -m pip install --upgrade pip wheel setuptools pyt ...

  8. ACM-ICPC 2018 南京赛区网络预赛 E AC Challenge 状压DP

    题目链接: https://nanti.jisuanke.com/t/30994 Dlsj is competing in a contest with n (0 < n \le 20)n(0& ...

  9. UVa 12563 劲歌金曲（0-1背包）

    https://vjudge.net/problem/UVA-12563 题意: 在一定的时间内连续唱歌,最后一首唱11分钟18秒的劲歌金曲,问最多能长多长时间. 思路: 0-1背包问题,背包容量为t ...

  10. pandas demo 示例

    #构造 import pandas as pd import pickle import numpy as np dates=pd.date_range() df = pd.DataFrame(np. ...