innerText、textContent和innerHTML三者的区别

相同点：
“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>
复制代码

2. 获取标签中间的内容
   “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”。

转载于:https://juejin.im/post/5bab38935188255c791b0983