一、区别

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>