innerText和innerHTML的区别

最新推荐文章于 2022-06-05 09:10:03 发布

原创最新推荐文章于 2022-06-05 09:10:03 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#innerHTML #innerText

javascript 专栏收录该内容

134 篇文章

订阅专栏

本文探讨了JavaScript中innerText和innerHTML属性的区别。虽然两者都用于读取元素的文本内容，但innerHTML还可以设置HTML标签，而innerText则不行。通过示例代码展示了如何使用这两个属性来修改页面元素。

innerText和innerHTML的区别

<p id="demo">我是一个P标签</p>
	<button onclick="fn1()">text</button>
	<button onclick="fn2()">html</button>
	<script>
		var demo =document.getElementById('demo');
		console.log(demo.innerHTML);
		console.log(demo.innerText);
		function fn1(){
			demo.innerText="<h1>我变成一个H1标签了</h1>";
		}
		function fn2(){
			demo.innerHTML="<h1>我变成一个H1标签了</h1>";
		}
	</script>

效果如下：
innerHTML和innerText
其实两者在获取元素内容的时候没有什么区别，但是innerHTML可以设置标签+内容,这个innerText是没有这个效果的，但是刷视频的时候看到一个大佬一直用innerText，我很不理解，看到这个帖子的大佬烦劳解释一下