innerText 与 innerHTML 以及 value 的区别

最新推荐文章于 2024-08-13 14:14:49 发布

白胡子永远

最新推荐文章于 2024-08-13 14:14:49 发布

阅读量279

点赞数 51

分类专栏：前端之HTML+CSS 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_44362089/article/details/126867113

版权

前端之HTML+CSS 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

innerText 与 innerHTML 以及 value 的区别

1.标签对之间是一个值

即：是在< p > < /p >标签中间直接写一个值。

<html>
	<head><title>innerHTML，innerText,value的区别</title></head>
	<body>
		<p id="p1">hello world </p>
		<script>
			window.document.getElementById('p1').innerHTML
			window.document.getElementById('p1').innerText
			window.document.getElementById('p1').value
		</script>
	</body>
</html>

以上代码运行结果为：

				 hello world
				 hello world
				 undefined

对比下面的代码，在< p >< /p >标签之间再写一个标签

2.标签对之间再写一个标签

即：< div>< p >< /p>< /div>

<html>
	<head><title>innerHTML，innerText,value的区别</title></head>
	<body>
		<div id="d1"><p id="p1">hello world </p></div>
		<script>
			window.document.getElementById('d1').innerHTML
			window.document.getElementById('d1').innerText
			window.document.getElementById('d1').value
		</script>
	</body>
</html>

运行结果为：

					< p id="p1">hello world < /p>
					hello world
					undefined

经过以上对比，可以总结得到：

1.当标签对之间是个文本：

		  innerHTML的结果为：文本值
		  innerText的结果为：文本值

2.当标签对里面还是一个标签对的时候：

			innerHTML的结果为：里面的整个标签对原封不动
			innerText的结果为：里面标签对的文本值(没有文本值则为undefined)

3.value的值只跟标签是否有value属性有关，若是标签有value属性，那么value值就是value属性的值。没有value属性，那么就是undefined

建议： **多使用innerHTML,少使用innerText 原因如下：innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用 innerHTML，而少用innerText**

白胡子永远

关注

51
点赞
踩
44

收藏

觉得还不错? 一键收藏
打赏
19
评论
innerText 与 innerHTML 以及 value 的区别

innerHTML,innerText的区别，常用
复制链接

扫一扫

专栏目录