innerText、textContent和innerHTML三者的区别

4,043 阅读1分钟

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

不同点:

  1. 设置标签中间的内容
    如果内容中含有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>
  1. 获取标签中间的内容
    “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”。