前端利用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
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<div class="one">111</div>
		<p>pppp</p>
		<input type="text" value="默认值"/>
		<a href="###" id="a1">超链接</a>
		<div id="box">
			<span>span行元素</span>
		</div>
		
	</body>
</html>
<script type="text/javascript">
	
	var one = document.getElementsByClassName("one")[0];
	one.style.backgroundColor = "pink";
	one.style.height = "100px";
	
	//1.写入文档  
	/*
	 缺点:
	 1.不能写入指定的标签中!
	 2.直接写入body中
	 优点: 不会新数据覆盖旧数据!每次写入的数据都会自动拼接!! 
	 */
	document.write("哈哈哈你好!!");
	document.write("0000789789!!");
	document.write("<h1>大标题</h1>");
	//2. innerHTML 重点!! 即可给标签赋值  也可 对标签取值!!
	/*
         优点:
     1.既能写入文本字符串,也能直接写标签
     2.可以指定写入某个父标签中,不会直接写入body
         缺点:新数据会覆盖旧数据!   但是可以通过  += 来解决!!
     */
          one.innerHTML = "周润发";
          console.log(one.innerHTML);
           one.innerHTML = one.innerHTML + "周星驰";
	     one.innerHTML += "<p>直接写入标签</p>";
	     
	     
	     //3. innerText  既可给标签赋值  也可 对标签取值!!
	     /*
	    特点: 只能写入字符串,不识别标签字符串.也是新数据覆盖旧数据!
	      */
	     var p = document.getElementsByTagName("p")[1];
	     p.innerText = "哈哈";
	     p.innerText += "<a href='###'>京东</a>"
	     
	     //4.注意注意!重点!  给input赋值或者取值  只能通过value
	     var i1 = document.getElementsByTagName("input")[0];
	     i1.value = "哈哈哈哈我试试!";
	     i1.value += "肯定可以拼接!";
	     console.log(i1.value);
</script>

运行结果:

前端三剑客
#JS
前端利用js修改标签内容
http://ultracode.cn/2020/11/03/JS/前端利用js修改标签内容/
作者
Win
发布于
2020年11月3日
许可协议