节点的操作

最新推荐文章于 2022-09-12 22:17:17 发布

公子薛

最新推荐文章于 2022-09-12 22:17:17 发布

阅读量673

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/xgcfxl2011/article/details/8227980

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

公子薛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
节点的操作

无标题文档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;
复制链接

扫一扫

专栏目录