<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM增删改查</title>
<style type="text/css">
div{
border:#306 1px solid;
width:200px;
height:30px;
margin:10px;
}
#div_1{
background-color:#00ccff;
}
#div_2{
background-color:#FFccff;
}
#div_3{
background-color:#cc00ff;
}
#div_4{
background-color:#00FF00;
}
</style>
</head>

<body>
<script type="text/javascript">
//创建并添加节点
//需求：在div_1节点中添加一个文本节点
function crtAndAdd(){
/*
*1、创建一个文本节点。
*2、获取div_1节点。
*3、将文本节点添加到div_1节点中。
*/

//1、创建节点。使用Document中的createTextNode方法
var oTextNode = document.createTextNode("这是一个新的文本");

//2、获取div_1节点
var oDivNode = document.getElementById("div_1");

//3、将文本节点添加到div_1节点中。
oDivNode.appendChild(oTextNode);

}

//需求：在div_1中创建并添加一个按钮节点。
function crtAndAdd2(){
//1、创建一个按钮节点
var oButNode = document.createElement("input");
oButNode.type = "button";
oButNode.value="一个新按钮";

//2、获取div_1节点
var oDivNode = document.getElementById("div_1");

//3、将文本节点添加到div_1节点中。
oDivNode.appendChild(oButNode);
}

//通过另一种方式完成添加按钮
function crtAndAdd3(){
/*
*其实是使用了容器型标签中的一个属性。innerHTML
*这个属性可以设置html文本
*/

//1、获取div_1节点
var oDivNode = document.getElementById("div_1");

oDivNode.innerHTML = "<input type='button' value='有个按钮' />";
oDivNode.innerHTML ="<a href='http://www.baidu.com'>有个超链接</a>";
}

//需求将div_2节点删除
function delNode(){
//1、获取div_2节点。
var oDivNode = document.getElementById("div_2");

//2、使用div节点的removeNode方法删除
//oDivNode.removeNode(true); PS:较少用

//一般使用removerChild方法。删除子节点。
//获取div_2的父节点，然后在用父节点的removeChild，将div_2删除。
oDivNode.parentNode.removeChild(oDivNode);
}

//需求：用div_3节点替换div_1节点。
function updateNode(){
/*
*获取节点div_1和div_3
*使用replaceNode进行替换
*/
var oDivNode_1 = document.getElementById("div_1");
var oDivNode_3 = document.getElementById("div_3");

//oDivNode_1.replaceNode(oDivNode_3);
//建议使用replaceChild
oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);
}

//需求：希望用div_3替换div_1，并保留div_3节点。
//其实就是对div_3进行克隆
function cloneDemo(){
var oDivNode_1 = document.getElementById("div_1");
var oDivNode_3 = document.getElementById("div_3");
var oCopyDiv_3 = oDivNode_3.cloneNode(true);

//oDivNode_1.replaceNode(oDivNode_3);
//建议使用replaceChild
oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);

}

</script>

<input type="button" value="创建并添加节点" onclick="crtAndAdd3()" />
<input type="button" value="删除节点" onclick="delNode()" />
<input type="button" value="修改节点" onclick="updateNode()" />
<input type="button" value="克隆节点" onclick="cloneDemo()" />
<div id="div_1">

</div>
<div id="div_2">
好好学习，day day up!
</div>
<div id="div_3">
div区域演示文字
</div>
<div id="div_4">
节点的增删该查
</div>

</body>

节点操作-创建并添加&删除节点&替换&克隆节点的更多相关文章

  1. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  2. 1.javascript节点的操作 创建、添加、移除、移动、复制、插入（修改）

    (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节 ...

  3. C#中 添加 删除 查找Xml中子节点

    //添加xml节点    private void AddXml(string image, string title)     {        XmlDocument xmlDoc = new X ...

  4. javascript数组操作(创建、元素删除、数组的拷贝)

    这篇文章主要介绍了javascript数组操作,包括创建.元素的访问.元素删除.数组的拷贝等操作,还有其它示例,需要的朋友可以参考下 1.数组的创建 复制代码 代码如下: var arrayObj = ...

  5. 点滴积累【JS】---JS小功能（操作Table--动态添加删除表格及数据）

    效果: 代码: <head runat="server"> <title></title> <style type="text/ ...

  6. JQuery学习笔记（3）——节点操作 节点查找

    插入节点 内部插入 所谓的内部插入,就是指在节点里面的插入,而外部插入,则是在节点外面插入. append() prepend() appendTo() prependTo() append和prep ...

  7. javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点

    DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...

  8. js的DOM节点操作：创建 ，插入，删除，复制，查找节点

    DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...

  9. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

随机推荐

  1. sql over的作用及用法

    over不能单独使用,要和分析函数:rank(),dense_rank(),row_number()等一起使用.其参数:over(partition by columnname1 order by c ...

  2. window计划任务

    我的电脑->管理->任务计划程序     [或:控制面板->类别:大图像->管理工具->任务计划程序] 右边创建任务: 常规:名字和 是否 只在用户登录是运行 触发器:新 ...

  3. svn服务器端的客户端自动更新

    先说这个方式的一个弊端,那就是服务器端这边代码不能与svn服务器出现冲突,一旦冲突就失效. 实现原理是,利用svn版本库,hooks目录的bat钩子开展工作. 共在hooks目录下建立3个文件如下:p ...

  4. 【转】移动web页面使用字体的思考

    回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义 font-family 为微软雅黑,后来发到线上后,细心的产品经理发现页面的 ...

  5. 20145304 Java第八周学习报告

    20145304<Java程序设计>第八周学习总结 教材学习内容总结 NIO NIO使用频道来衔接数据节点,在处理数据时,NIO可以让你设定缓冲区容量,在缓冲区中对感兴趣的数据区块进行标记 ...

  6. 20145304 Java第七周学习报告

    20145304<Java程序设计>第七周学习总结 教材学习内容总结 1.时间的度量: 格林威治标准时间(GMT)通过观察太阳而得,其正午是太阳抵达天空最高点之时,因地球的公转与自传,会造 ...

  7. 【BZOJ】3240: [Noi2013]矩阵游戏

    题意 给出\(n, m(1 \le n, m \le 10^{1000000})\),求\(f(n, m) \ \mod \ 10^9+7\) $$\begin{cases}f(1, 1) = 1 \ ...

  8. java画图程序_图片用字母画出来_源码发布_版本二

    在上一个版本:java画图程序_图片用字母画出来_源码发布 基础上,增加了图片同比例缩放,使得大像素图片可以很好地显示画在Notepad++中. 项目结构: 运行效果1: 原图:http://imag ...

  9. FLEX SharedObject介绍及应用

    ShareObject介绍: 1 ShareObject,顾名思义共享对象,而通常意义上的共享,从B/S结构上来讲,无非是客户端(浏览器端)的共享和服务器端的共享了,不错,ShareObject刚好份 ...

  10. flex的http URL转码与解码

    private function httpEncoding(param:String):String{    //转码     return encodeURIComponent(param); } ...