js--标签内容的设置

最新推荐文章于 2023-09-05 20:46:54 发布

Onlooker﹒

最新推荐文章于 2023-09-05 20:46:54 发布

阅读量1.4k

点赞数 4

分类专栏： JavaScript 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_74293254/article/details/131315574

版权

JavaScript 专栏收录该内容

40 篇文章 2 订阅

订阅专栏

1、标签内文本的控制

"innerText" 是在网页开发中常用的属性，用于获取或修改 HTML 元素中可见的文本内容。通过这个属性，您可以访问或修改 HTML 标签内的文本内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="myDiv">帅哥</div>
		<script>
			var myElement = document.getElementById("myDiv");
			console.log(myElement.innerText); // 输出：帅哥
			
			myElement.innerText = "整容成丑八怪"; // 将文本内容修改为 "整容成丑八怪"
			console.log(myElement.innerText); // 输出：整容成丑八怪

		</script>
	</body>
</html>

2、标签内HTML的控制

innerHTML属性用于设置或者获取元素的HTML内容，该属性不是W3C的标准属性，但是被主流浏览器支持，很好用，通过该属性，可以设置或者获取节点的内部HTML片段。例如：alert(hArr.innerHTML); hArr.innerHTML = "<strong>牛</strong>";

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="myDiv">这是一个 <b>180m</b>的帅哥</div>
		<script>
			var myElement = document.getElementById("myDiv");
			console.log(myElement.innerHTML); // 输出：这是一个 <b>180m</b>的帅哥
			
			myElement.innerHTML = "是一个整形后的 <i>帅哥</i>"; // 将 HTML 内容修改为 "是一个整形后的 <i>帅哥</i>"
			console.log(myElement.innerHTML); // 输出：是一个整形后的 <i>帅哥</i>

		</script>
	</body>
</html>