一、区别

innerHTML：

  • 在控件中加html代码 ,就是设置一个元素里面的HTML,标签对文本信息有效。
  • innerHtml获取的是标签内的标签元素包括文本。

innerTEXT：

  • 打印标签之间的纯文本信息，显示标签，标签无效，低版本的火狐浏览器不支持。
  • innerText 获取的是某个元素内的文本，不管这个元素内还有没有标签，它获取的只是文本，不管标签。

value：

  • 显示双引号中的全部内容，显示标签，标签无效。
  • value获取的是具有value属性标签的value值，div标签没有value属性，所以就获取不到；具有value属性的标签如input标签，button标签。

1
2
3
4
5
6
7
8
9
<div id="clickMe">关注
    <span>1111</span>
</div>

<script>
    console.log(div.innerText) //打印输出的是：关注1111
    console.log(div.innerHtml) //打印输出的是：关注<span>1111</span>
    console.log(div.value) //打印输出的是：空
</script>

二、举例

1. innerHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="demo">my first demo</p>
</body>
<script>
    document.getElementById("demo").innerHTML="<b>hello world</b>"
</script>
</html>

2. innerTEXT

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p id="demo">my first demo</p>
</body>
<script>
    document.getElementById("demo").innerText="<h1>My First JavaScript</h1>";
</script>
</html>

3. value

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="demo">my first demo</p>
    <input id="input" type="text">
</body>
<script>
    document.getElementById("input").value="<b>hello</b>"
</script>
</html>

三、结论

1. innerText是标签内的文本,输入输出的是字符串;

2. innerHtml是<标签内的文本,输入输出到该DOM内部纯HTML代码;

3. value是表单元素特有的属性,输入输出的是字符串;

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
26
27
<!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>