innerHTML和innerText的用法以及不同点

2022-07-26,,,

innerHTMLinnerText的区别


两者的主要区别在于用法不同;
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>

这个是网页显示效果:

分别点击按钮后控制台显示:

进行对比后发现,innerHTML会将标签和文本同时进行解析,而innerText只会将文本进行解析。

本文地址:https://blog.csdn.net/qq_43445758/article/details/111104278

《innerHTML和innerText的用法以及不同点.doc》

下载本文的Word格式文档,以方便收藏与打印。