web-strom
Dom-对节点的增删改查,替换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
border: #00ff00 1px solid;
width: 200px;
padding: 30px;
margin: 10px;
}
#div-1{
background-color: #00ccff;
}
#div-2{
background-color: #FFccff;
}
#div-3{
background-color: #cc00ff;
}
#div-4{
background-color: #00ff00;
}
</style>
<script>
//创建并添加节点
//在div-1中添加一个文本节点
function crtAndAdd(){
//1.创建节点
var oTextNode=document.createTextNode("这是一个新文本");
//2.获取div-1节点
var oDivNode=document.getElementById("div-1");
//3.将文本添加到div-1节点中
oDivNode.appendChild(oTextNode);
}
function crtAndAdd2(){
//1.创建一个按钮节点
var oButNode=document.createElement("input");
oButNode.type="button";
oButNode.value="一个新按钮";
//2.获取div节点
var oDivNode=document.getElementById("div-1");
//3.将按钮节点添加到div-1节点中
oDivNode.appendChild(oButNode);
}
//通过另外一种方法实现完成节点添加
function crtAndAdd3(){
//1.获取div节点
var oDivNode=document.getElementById("div-1");
oDivNode.innerHTML="<input type='button' value='有个按钮'>";
oDivNode.innerHTML="<a href=''>有个超链接</a>";
}//删除节点
function delNode(){
//1.获取div-2节点
var oDivNode=document.getElementById("div-2");
//2.使用div节点删除方法删除节点
// oDivNode.removeNode(true);//删除操作,很少使用
oDivNode.parentNode.removeChild(oDivNode);
}
//修改节点,div-3节点替换div-1节点
function updateNode(){
var oDivNode1=document.getElementById("div-1");
var oDivNode3=document.getElementById("div-3");
//oDivNode1.replaceNode(oDivNode3);
oDivNode1.parentNode.removeChild(oDivNode3,oDivNode1);
}
//用div-3替换div-1,并保留div-3节点,其实就是对div-3进行克隆
function cloneDemo(){
var oDivNode1=document.getElementById("div-1");
var oDivNode3=document.getElementById("div-3");
var oCopyDiv3=oDivNode3.cloneNode(true);
oDivNode1.parentNode.replaceChild(oCopyDiv3,oDivNode1);
}
</script>
</head>
<body>
<input type="button" value="创建并添加节点" οnclick="crtAndAdd3()"/>
<input type="button" value="删除节点" οnclick="delNode()"/>
<input type="button" value="修改节点" οnclick="updateNode()"/>
<input type="button" value="克隆节点" οnclick="cloneDemo()"/>
<div id="div-1">
</div>
<div id="div-2">
好好学习,天天向上
</div>
<div id="div-3">
div区域演示文字
</div>
<div id="div-4">
节点的增删改查
</div>
</body>
</html>