js-dom操作-添加-删除-替换

最新推荐文章于 2024-03-09 14:57:39 发布

Peter-HYJ

最新推荐文章于 2024-03-09 14:57:39 发布

阅读量209

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_46457853/article/details/114881754

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<button onclick="createNewP()">动态添加</button>
		<button onclick="createNewP2()">动态添加2</button>
		<button onclick="change()">替换p1内容</button>
		<button onclick="remove()">删除p1</button>
		<div id="div1">
			<p id="p1">段落1</p>
			<p id="p2">段落2</p>
		</div>
	</body>

</html>

<script>
	function createNewP(){
		//创建一个新的段落元素
		var newp=document.createElement("p");
		//创建新的文本节点
		var text=document.createTextNode("这是新创建的段落");
		//将文本节点添加到新元素中
		newp.appendChild(text);
		var x=document.getElementById("div1");
		x.appendChild(newp);
	}
	function createNewP2(){
		var newp=document.createElement("p");
		var text=document.createTextNode("添加到p1之前");
		newp.appendChild(text);
		
		//获取一个页面已经存在的元素
		var div=document.getElementById("div1");
		var p1=document.getElementById("p1");
		//将newp插入到p1之前
		div.insertBefore(newp,p1);
	}
	function change(){
		var newp=document.createElement("p");
		var text=document.createTextNode("改变之后的内容");
		newp.appendChild(text);
		
		var div=document.getElementById("div1");
		var p1=document.getElementById("p1");
		//将p1替换成newp
		div.replaceChild(newp,p1);
	}
	
	function remove(){
		/*var div=document.getElementById("div1");
		var p1=document.getElementById("p1");
		div.removeChild(p1);*/
		//若不想手动获取p1父元素，可用下面方法
		var p1=document.getElementById("p1");
		p1.parentNode.remove(p1);
	}
</script>

Peter-HYJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-dom操作-添加-删除-替换

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <button onclick="createNewP()">动态添加</button> <button onclick="createNewP2()">动态添加2</butt
复制链接

扫一扫