<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节点的操作(添加,删除,替换,克隆)
猜你喜欢
转载自blog.csdn.net/ldchin/article/details/84818346
今日推荐
周排行