innerHTML和innerText的用法以及不同点

最新推荐文章于 2025-01-23 00:48:55 发布

寻不修

最新推荐文章于 2025-01-23 00:48:55 发布

阅读量1.8k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43445758/article/details/111104278

版权

本文探讨了JavaScript中innerHTML和innerText的区别。innerHTML允许将元素作为HTML进行解析或修改，而innerText则处理纯文本内容。在操作网页显示效果时，innerHTML会保留并解析标签，而innerText则忽略标签仅处理文本。

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

innerHTML和innerText的区别

两者的主要区别在于用法不同；
innerHTML可以将获取的元素作为HTML元素进行解析或修改，
innerText可以将获取的元素作为纯文本进行解析或修改。

innerHTML和innerText的具体用法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="asmo-708">
		<title></title>
	</head>
	<body>
		<div id="kuai">
			<p>这是被div和p包裹的文本</p>
		</div>
		<input type="button" value="innerHTML" onclick="HTML()" />
		<input type="button" value="innerText" onclick="Text()" />
	</body>
	<script type="text/javascript">
		function HTML() {
			var kuai = document.getElementById("kuai")//获取div标签
			console.log(kuai.innerHTML)//控制台输出div里的HTML内容
		}

		function Text() {
			var kuai = document.getElementById("kuai")//获取div标签
			console.log(kuai.innerText)//控制台输出div里的文本内容
		}
	</script>
</html>