节点的增删改查-CSDN博客

本文链接：https://blog.csdn.net/wangqiankun2010/article/details/24745297

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>节点的增删改查</title>
<!--加入样式表-->
<style type="text/css">
div {
	border: #0099FF 1px solid;
	height: 60px;
	width: 120px;
	margin: 20px 0px 20px 20px;
	padding: 10px 0px 0px 20px;
}

#div_1 {
	background-color: #00FFFF;
}

#div_2 {
	background-color: #FF3399;
}

#div_3 {
	background-color: #0000FF;
}

#div_4 {
	background-color: #FFFF66;
}
</style>
</head>
<body>
	<input type="button" value="创建并添加节点" οnclick="addNode()" />
	<input type="button" value="删除节点" οnclick="deleteNode()" />
	<input type="button" value="替换节点" οnclick="updateNode()" />
	<input type="button" value="克隆节点" οnclick="copyNode()" />
	<hr />
	<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>

</body>
<script type="text/javascript">
	function addNode() {
		//创建一个A元素
		var aElement = document.createElement("a");//<a></a>
		//为A元素添加一个属性 href="http://www.bidu.com"
		aElement.setAttribute("href", "http://www.bidu.com");
		aElement.innerHTML = "baidu"; //<a href="http://www.baidu.com">baidu</a>
		var div1 = document.getElementById("div_1");
		div1.appendChild(aElement);
	}

	function deleteNode() {
		/* 删除节点*/
		var div2 = document.getElementById(div_2);//获取要删除节点的元素
		var parent = div2.parentNode; //获取要删除的父类节点
		parent.removeChild(div2);

	}

	/*替换节点*/
	function updateNode() {
		//<img src="" alt="" >
		var img = document.createElement("img"); //创建img标签
		img.setAttribute("src", "../img/logo_wy.png"); //添加src属性(alt 属性)
		var div3 = document.getElementById("div_3");//获得需要替换的元素<div>
		var parent = div3.parentNode;//获得父节点
		parent.replaceChild(img, div3);

	}
	/*克隆节点*/
	function copyNode() {
		var div4 = document.getElementById("div_4");//获取div4的元素
		var div4_copy = div4.cloneNode(true);
		/* var a =div4.parentNode
		alert(a.nodeName); */
		div4.parentNode.appendChild(div4_copy);

	}
</script>

</html>