DOM_操作DOM树

最新推荐文章于 2021-09-05 13:17:11 发布

田田田田__

最新推荐文章于 2021-09-05 13:17:11 发布

阅读量219

点赞数 1

分类专栏： DOM

本文链接：https://blog.csdn.net/weixin_42061805/article/details/81506471

版权

DOM 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

操作DOM树

方法：

方法	描述
appendChild()	将新的子节点添加到指定节点
insertBefore(new,old)	在指定的节点前面添加新的节点
removeChild()	删除指定节点的子节点
replaceChild(new,old)	替换子节点

操作：

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#div2 {
	width: 200px;
	height: 200px;
	border: 1px dashed blue;
}
</style>
</head>
<body>
<div id="div1">
	<ul id="ulId">
		<li id="li1">100</li>
		<li id="li2">200</li>
		<li id="li3">300</li>
		<li id="li4">400</li>
	</ul>
</div>
<div id="div2"> </div>
<input type="button" value="button" onclick="click1()" />
<script type="text/javascript">
		function click1(){
			//将新的子节点添加到指定节点
//			var ulId = document.getElementById("ulId");
//			var div2 = document.getElementById("div2");
//			
//			div2.appendChild(ulId);
			
			//在指定的节点前面添加新的节点
//			var ulId = document.getElementById("ulId");
//			var li2 = document.getElementById("li2");
//			var li5 = document.createElement("li"); 
//			var text = document.createTextNode("添加的数据");
//			li5.appendChild(text);
//			ulId.insertBefore(li5,li2);
			
			//删除指定节点的子节点
//			var ulId = document.getElementById("ulId");
//			var li2 = document.getElementById("li2");
//			ulId.removeChild(li2);
			
			//替换子节点
			var ulId = document.getElementById("ulId");
			var li2 = document.getElementById("li2");
			var li5 = document.createElement("li"); 
			var text = document.createTextNode("替换的数据");
			li5.appendChild(text);
			ulId.replaceChild(li5,li2);
			}
	</script>
</body>
</html>

补充：

innerHTML属性不仅可以获取指定标签内文本内容，还可以将文本内容和html代码赋值给标签内

var div2 = document.getElementById("div2");
document.write(div2.innerHTML);	
			
var ta = "<table><tr><td>添加的表格</td></tr></table>";
div2.innerHTML = ta;