节点操作-创建并添加&删除节点&替换&克隆节点

<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>

时间： 2024-08-04 22:15:09

节点操作-创建并添加&删除节点&替换&克隆节点

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

0417 js节点操作表格（添加、删除）

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

DOM元素选择属性操作事件操作节点操作创建元素的区别

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

通过系统服务设置程序为开机自启动——系统服务操作(创建/启动/停止/删除)

Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

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

C#操作XML学习之创建XML文件的同时新建根节点和子节点(多级子节点)

轻松学习JavaScript二十二：DOM编程学习之节点操作