js中的innerHTML，innerText，value的区别

最新推荐文章于 2022-09-04 15:27:56 发布

骆小胖

最新推荐文章于 2022-09-04 15:27:56 发布

阅读量920

点赞数 2

分类专栏：学生提问 JS 前端积累笔记随笔文章标签：学生提问 JS 前端积累笔记随笔 ViewUI

本文链接：https://blog.csdn.net/qq_42445490/article/details/88818999

版权

前端积累同时被 3 个专栏收录

105 篇文章 0 订阅

订阅专栏

笔记随笔

75 篇文章 0 订阅

订阅专栏

63 篇文章 0 订阅

订阅专栏

【前言】

学生提问：js中的innerHTML，innerText，value的区别是什么？许多同学在用js处理表单时经常用混

参考网址：https://blog.csdn.net/qq_36356142/article/details/53023916

https://blog.csdn.net/dexing07/article/details/77947333

https://blog.csdn.net/k491022087/article/details/52558868

【主体】

（1）先说下常见的innerHTML和innerText

实例代码：

<div id="test"> 
   <span style="color:red">test1</span> test2 
</div> 
<a href="javascript:alert(test.innerHTML)">innerHTML内容</a> 
<a href="javascript:alert(test.innerText)">inerHTML内容</a>

①共同点：innerHTML和innerText都会把元素内内容替换掉。

②不同点：

1. innerHTML:

　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。上例的test.innerHTML的值也就是

<span style="color:red">test1</span> test2

2. innerText:

　　从起始位置到终止位置的内容, 但它去除Html标签。上例中的text.innerTest的值也就是

test1 test2

其中span标签去除了。

注意： 1. innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器；

2. 尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签

首先先说一下我自己认为的 innerHTML，innerText，value的区别

（1）innerHTML 是在控件中加html代码就是设置一个元素里面的HTML、

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
<h1>My First Web Page</h1>  
<p id="demo">My First Paragraph.</p>  
<script>  
document.getElementById("demo").innerHTML="<h1>My First JavaScript</h1>";  
</script>  
</body>  
</html>

效果图：

（2）innerText 在控件中添加文字

<html>  
<body>  
<h1>My First Web Page</h1>  
<p id="demo">My First Paragraph.</p>  
<script>  
document.getElementById("demo").innerText="<h1>My First JavaScript</h1>";  
</script>  
</body>  
</html>

（3）value="" 我理解的就是控件中的value属性直接赋值成双引号里面的东西

<html>  
<body>  
<h1>My First Web Page</h1>  
<p id="demo">My First Paragraph.</p>  
<input id="input" type="text"></input>  
<script>  
document.getElementById("input").value="<h1>My First JavaScript</h1>";  
</script>  
</body>  
</html>

比如<input/> 中有value属性显示内容的时候也是 <input value="内容"/> 而不是 <input >内容<input />

【总结】

一般在JavaScript中写代码的的时候,总容易被innerHTML、innerText、outerHTML以及value搞晕,用的时候不经意间就会用错，特意总结一下。

定义：

innerHTML: 属性设置或返回表格行的开始和结束标签之间的 HTML。（也就数说，用innerHTML的元素必须是标签对的形式，也就是input啥都输不出来）。

outerHTML: 设置或获取对象及其内容的 HTML 形式。（标签对，input输出本身）

innerText：设置或获取位于对象起始和结束标签内的文本。（标签对,input啥也输不出来）

value 这个用的地方比较多,这里仅以input中的value为例。就是input的值。(标签对,输出undefined)

骆小胖

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js中的innerHTML，innerText，value的区别

details/53023916https://blog.csdn.net/dexing07/article/details/77947333https://blog.csdn.net/k491022087/article/details/52558868【主体】（1）先说下常见的innerHTML和innerText 实例代码：&lt;div id="test"&gt; &lt;span style="color
复制链接

扫一扫