innerHTML、innerText和outerHTML的区别

最新推荐文章于 2022-02-05 09:13:38 发布

Tank_in_the_street

最新推荐文章于 2022-02-05 09:13:38 发布

阅读量518

点赞数

分类专栏： JavaScript DOM和BOM 文章标签： JavaScript innerHTML innerText outerHTML

本文链接：https://blog.csdn.net/Tank_in_the_street/article/details/78168725

版权

JavaScript DOM和BOM 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在JavaScript里，innerHTML和innerText的主要区别是innerHTML能够把作用元素内的所有内容包括标签都能输出来，而innerText只能输出文本内容，不能输出标签。举个例子，下面的这个例子div标签下有一个文本，这两个方法都能输出haha，但是如果div标签里多一个p标签的话，那么会体现出他们的不同：

<body>
	<div id='div'>haha</div>
</body>
<script type="text/javascript">
	var a = document.getElementById('div')
        console.log(a.innerHTML)
	console.log(a.innerText)
</script>

<body>
	<div id='div'><p>haha</p></div>
</body>
<script type="text/javascript">
	var a = document.getElementById('div')
	console.log(a.innerHTML)
	console.log(a.innerText)
</script>

这个innerHTML是W3C标准，而innerText它只是IE的标准，不够现在越来越多的浏览器支持innerText。既然有inner，肯定有outer，在JavaScript有一个outerHTML，这个东西输出的内容在innerHTML的基础上还增加了输出对象标签本身以及里面的缩进。举个例子就来分清楚outerHTML和innerHTML的区别：

<body>
	<div id='div'><p>haha</p></div>
</body>
<script type="text/javascript">
	var a = document.getElementById('div')
	console.log(a.innerHTML)
	console.log(a.outerHTML)
</script>

<body>
	<div id='div'>
		<p>haha</p>
	</div>
</body>
<script type="text/javascript">
	var a = document.getElementById('div')
	console.log(a.innerHTML)
	console.log(a.outerHTML)
</script>

上面这两个代码差不多一样，只是在div内一个有缩进另一个没有，所以输出的结果也是不同的。