<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div{
border:#00FF00 1px solid;
height:60px;
width:120px;
margin:20px 0px 20px 20px;
padding:10px 0px 0px 20px;
}
#div_1{
background-color:#0000CC;
}
#div_2{
background-color:#CC6633;
}
#div_3{
background-color:#CCCC00;
}
#div_4{
background-color:#66CCCC;
}
</style>
<script type="text/javascript">
function crtAndadd()
{
//给第一个div添加一个文本节点
var textNode = document.createTextNode("div区域一");
var divNode = document.getElementById("div_1");
//divNode.appendChild(textNode);
//添加一个超链接
var aNode = document.createElement("a");
aNode.href = "http://www.baidu.com";
aNode.innerText = "百度一下";
//divNode.appendChild(aNode);
//divNode.innerText = "div区域一hehe"
//divNode.innerHTML = "div区域一hehe".fontcolor('red');
divNode.innerHTML = "<input type = 'button' value = '按钮'/>";
}
function delNode()
{
var divNode = document.getElementById("div_2");
var textNode = divNode.childNodes[0];
//divNode.removeChild(textNode);
//对于文本的删除更简单的删除
//divNode.innerHTML = "";
//把div_2节点删除
//方式一
//找到div_2的父节点,然后用removeChild把div_2这个子节点删除
//divNode.parentNode.removeChild(divNode);
//方式二
divNode.removeNode(true);
}
function rplNode()
{
var divNode = document.getElementById("div_3");
var oldTextNode = divNode.childNodes[0];
var newTextNode = document.createTextNode("一个新的文本");
//divNode.replaceChild(newTextNode, oldTextNode);
//用div区域三替换div区域一
var divNode_1 = document.getElementById("div_1");
div_1.replaceNode(divNode);
}
function copyNode()
{
var divNode_1 = document.getElementById("div_1");
var divNode_4 = document.getElementById("div_4");
var copy_4 = divNode_4.cloneNode(true);
divNode_1.replaceNode(copy_4);
}
</script>
</head>
<body>
<input type="button" value="创建并添加节点" οnclick="crtAndadd()" />
<input type="button" value="删除节点" οnclick="delNode()" />
<input type="button" value="替换节点" οnclick="rplNode()" />
<input type="button" value="克隆节点" οnclick="copyNode()" />
<hr />
<div id="div_1">
</div>
<div id="div_2">
div区域二
</div>
<div id="div_3">
div区域三
</div>
<div id="div_4">
div区域四
</div>
</body>
</html>
节点的操作
最新推荐文章于 2022-09-12 22:17:17 发布