innerText、textContent和innerHTML三者的区别-优快云博客

本文详细解析了JavaScript中innerText, textContent和innerHTML三个属性的功能与区别。innerText和textContent主要用于获取纯文本内容，而innerHTML能获取并设置包含HTML标签的内容。适合初学者了解如何在网页中操作文本与HTML。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相同点：
“innerText”、“textContent”和“innerHTML”这三个属性都可以设置标签中间的文本内容。

不同点：

设置标签中间的内容
如果内容中含有html标签的话，“innerText”和“textContent”是无法把html标签转化成标签的，而是当做纯文本内容显示出来，而“innerHTML”则可把内容中的标签转化成html标签,例如：

<div id="dv"></div>
		<script type="text/javascript">
			var dv = document.getElementById("dv");
			dv.innerText = "<p>這是一個p标签</p>";
			out：“<p>這是一個p标签</p>”
			dv.innerHTML = "<p>這是一個p标签</p>";
			out：“這是一個p标签”，用p标签包着
		</script>
复制代码

获取标签中间的内容
“innerText”,“textContent”:获取的是该标签和该标签下子标签中的文本内容
“innerHTML”:获取的是该标签的所有内容，包括其子标签

<div id="dv">
			这是一个div标签
			<p>这是一个p标签</p>
			
		</div>
		
		<script type="text/javascript">
			var dv = document.getElementById("dv");
			console.log(dv.innerText);
			// out:这是一个div标签<br/>
			       这是一个p标签
			console.log(dv.innerHTML);
			// out:这是一个div标签<br/>
			       <p>这是一个p标签</p>
		</script>
复制代码

结论：想要在js中添加标签的或者获取该标签内的子标签和内容的，使用“innerHTML”。