前端js创建标签和插入标签

最新推荐文章于 2024-06-23 20:25:37 发布

钱端攻城狮

最新推荐文章于 2024-06-23 20:25:37 发布

阅读量7.3k

点赞数

分类专栏： js 文章标签：前端 javascript css

本文链接：https://blog.csdn.net/m0_54932975/article/details/123599627

版权

js 专栏收录该内容

86 篇文章 3 订阅

订阅专栏

这段代码展示了如何使用JavaScript进行DOM操作，包括创建、插入、删除和替换HTML元素。它创建了一个img标签并设置其src属性，接着添加了一个a标签和h2标签，并将h2标签插入到img之前。此外，还演示了如何删除和替换元素。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="box"></div>
		<div class="root"></div>
	</body>
</html>
<script type="text/javascript">
	//1.获取标签
	var box=document.querySelector(".box");
	var rot=document.querySelector('.root');
	//2.创建一个元素节点 --------非常重要
	var img=document.createElement('img');
	console.log(img,typeof img);
	//3.将标签插入-------------非常重要
	box.appendChild(img);
	//4.设置属性
	img.src="img/1.jpg";
	//5.通过innerHTML新增一个子标签
//	box.innerHTML+="<h1 class='tittle'>大标题</h1><p class='info'>段落标签</p>";
	//推荐:创建大模块使用create+append 里面的小模块用innerHTML
	
	//6.再创建一个a标签 放入box
	var a=document.createElement("a");
	a.href="http://www.baidu.com";
	a.innerHTML="百度一下";
	box.appendChild(a);//拼接在父标签中最后的位置
	//7.再创建一个h2标签 要求放在box第一个子标签位置
	var h2=document.createElement("h2");
	h2.innerHTML="哈哈哈哈哈哈";
	h2.style.backgroundColor="red";
	//innerBefore(新元素,指定元素); 将新元素插在指定元素前面
	box.insertBefore(h2,box.firstElementChild);
	//8.删除指定的子标签
//	document.body.removeChild(rot);
	//9.删除在自己个!!!!注意!深处本标签,会连带着自身中的子标签都删掉
//	box.remove();
	//10.替换标签  replace(新标签,旧标签);
	var h3=document.createElement("h3");
	h3.innerHTML="周五了周五了";
	//h3替换h2
	box.replaceChild(h3,h2);
	//11.删除box中的img
	box.removeChild(img);

</script>

运行结果:
在这里插入图片描述

钱端攻城狮

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
前端js创建标签和插入标签

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="box"></div> <div class="root"></div> </body></html><script
复制链接

扫一扫

专栏目录