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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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>

运行结果:

前端三剑客
#JS
前端js创建标签和插入标签
http://ultracode.cn/2020/11/20/JS/前端js创建标签和插入标签/
作者
Win
发布于
2020年11月20日
许可协议