【前言】
学生提问: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)
.