dom基础8

最新推荐文章于 2023-04-22 17:47:07 发布

taojYang

最新推荐文章于 2023-04-22 17:47:07 发布

阅读量135

点赞数

分类专栏： dom 文章标签： dom

本文链接：https://blog.csdn.net/weixin_43293451/article/details/91434253

版权

dom 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM</title>
</head>
<body>
	<div id="parentDiv">
		<div id="d1">div1</div>
		<div id="d2">div2</div>
		<div id="d3">div3</div>
	</div>
	<script type="text/javascript">
		function replace(){
			var d4 = document.createElement("div");
			var text = document.createTextNode("第四个div");
			d4.appendChild(text);

			var d3 = document.getElementById("d3");
			var parentDiv = document.getElementById("parentDiv");
			parentDiv.replaceChild(d4,d3);//将d3替换为d4
		}
		function append(){
			var divadd = document.createElement("div");
			var text = document.createTextNode("追加的div");
			divadd.appendChild(text);
			var parenDiv = document.getElementById("parentDiv");
			parentDiv.appendChild(divadd);//追加
		}
		function insert(){
			var divinsert = document.createElement("div");
			var text = document.createTextNode("插入的div");
			divinsert.appendChild(text);
			var parentDiv = document.getElementById("parentDiv");
			var d3 = document.getElementById("d3");
			parentDiv.insertBefore(divinsert,d3);//在d3前面插入divinsert
		}
	</script>
	<button onclick="replace()">替换第三个div</button><br>
	<button onclick="append()">追加div</button><br>
	<button onclick="insert()">第三个div前插入</button><br>
</body>
</html>

taojYang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom基础8

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DOM</title></head><body> <div id="parentDiv"> <div id="d1">div1...
复制链接

扫一扫

专栏目录