js中innerText/value/innerHTML三个属性的区别

来源：互联网发布：linux多线程机制编辑：程序博客网时间：2024/05/22 00:33

在做一个两个窗口之间的简单信息交互时遇见了一点问题，导致信息无法正常的传递。

最后发现问题是在innerText和value这两个属性上，先简单的总结记录一下几个相似的属性的作用：

1、innerText：一般是指标签的可显示文本

2、value：一般为标签的的属性值

3、innerHTML：标签之间的

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>测试</title><script>function test1(){window.alert(document.getElementById("value").value);}function test2(){window.alert(document.getElementById("innerHTML").innerHTML);}function test3(){window.alert(document.getElementById("innerText").innerText);}</script></head><body id="innerHTML">消息内容：<span id="innerText">消息</span><br/><input type="text" id="value" /><br/><input type="button" onclick="test1()" value="value" /><br/><input type="button" onclick="test2()" value="innerHTML"/><br/><input type="button" onclick="test3()" value="innerText"/><br/></body></html>

刷新页面：

点击相应的按钮，看显示的内容：

value：

innerHTML：

innertext：

可以看出：

1.innerText是标签内的文本,输入输出的是字符串;
2.innerHtml是<标签内的文本,输入输出到该DOM内部纯HTML代码;
3.value是表单元素特有的属性,输入输出的是字符串;

1 0