JavaScript innerText与innerHtml与value的区别

发表于 更新于 分类于 ， Waline： 本文字数： 1.6k 阅读时长 ≈ 1 分钟

JavaScript innerText与innerHtml与value的区别

  • innerHtml是标签内的文本,输入输出到该DOM内部纯HTML代码，也就是说使用innerHTML,可以在标签里面添加html代码 也就是设置一个元素里面的HTML代码;
  • innerText是id为object的闭合标签内的文本,输入输出的是转义文本(字符串)。也就是说使用innerText可在控件中添加文本，或者读入文本。
  • value是**表单元素特有**的属性,输入输出的是转义文本(字符串);非表单元素没有value属性，如div，span等；value在不同表单元素里有不同的意义，如button中为按钮中的文本，input（text）为默认文本，textarea为默认文本。

所以操作表单元素的文本内容用value；而innerHTML与innerText用于操作非表单元素的内容或文本内容。

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <center>
        <!-- 没有value属性 -->
        <div id="20181126161922">
            <h3>123</h3>
        </div>
        <input type="button" onclick="setID20181126161922()" value="showDIV">
    </center>
    <script>
        // id="20181126161922" onclick="setID20181126161922()"
        function setID20181126161922() {
            var id = document.getElementById("20181126161922");
            var str = "innerHTML:" + id.innerHTML +
                "\ninnerText:" + id.innerText +
                "\nvalue:" + id.value;
            alert(str);
        }
    </script>
</body>
</html>

运行结果

1
2
3
4
innerHTML:
            <h3>123</h3>
innerText:123
value:undefined

div中时没有value属性的，所以这里返回的是undefined

参考链接

https://m.baidu.com/mip/c/www.360doc.cn/mip/564782394.html
https://blog.csdn.net/qq_30567891/article/details/60466455
http://www.cnblogs.com/zhang-jiao/p/9589967.html
https://www.jianshu.com/p/2f7942af4acb?utm_campaign=haruki&utm_content=note&utm_medium=reader_share&utm_source=qq