6.动态创建、添加、删除标签

最新推荐文章于 2022-08-29 23:03:07 发布

cuichen97

最新推荐文章于 2022-08-29 23:03:07 发布

阅读量715

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/cuichen16/article/details/98893326

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

创建标签:

document.createElement(“标签名”)
例:创建P标签
var varP=document.createElement("p");

添加标签:

document对象.appendChild(要添加的标签名)
例:添加到div标签中
var vDiv=document.querySelector("#div1");
vDiv.appendChild(varP);

删除标签:

先获取父元素,然后删除标签
父标签的对象.removeChild(要删除的子标签对象);

var vDiv=document.querySelector("#div1");
var vP=document.querySelector("#sp");
vDiv.removeChild(vP);

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.pclass{
				width: 400px;
				height: 200px;
				background-color: paleturquoise;
				line-height: 100px;
			}
		</style>
		<script type="text/javascript">
			function create(){
				//创建p标签
				var varP=document.createElement("p");
				varP.id="sp";
				varP.className="pclass";
				varP.innerHTML="好好学习<br/>天天向上!";
				//添加到div中
				var vDiv=document.querySelector("#div1");
				vDiv.appendChild(varP);
			}
			function del(){
				//获取父元素,删除标签
				var vDiv=document.querySelector("#div1");
				var vP=document.querySelector("#sp");
				vDiv.removeChild(vP);
			}
		</script>
	</head>
	<body>
		<input type="button" value="创建" onclick="create()" />
		<input type="button" value="删除" onclick="del()" />
		<div id="div1">
			
		</div>
	</body>
</html>