innerHTML、outerHTML、innerText和outerText

innerHTML、outerHTML、innerText和outerText分别表示什么呢?

  1. innerHTML 设置或获取位于对象起始和结束标签内的 HTML
  2. outerHTML 设置或获取对象及其内容的 HTML 形式
  3. innerText 设置或获取位于对象起始和结束标签内的文本
  4. outerText 设置(包括标签)或获取(不包括标签)对象的文本

简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于

  • innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。
  • 在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。

可以用下面的代码进行测试:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
body {
font-family: "宋体";
color: blue;
font-size: 9pt
}
</style>
</head>
<body>
<ul>
<li id="id1"><span>innerHTML效果.</span></li>
<li id="id2"><span>innerText效果.</span></li>
<li id="id3"><span>outerHTML效果.</span></li>
<li id="id4"><span>outerText效果.</span></li>
</ul>
<div>
<button onclick="get(1)">查看 innerHTML效果</button>
<button onclick="get(2)">查看 innerText效果</button>
<button onclick="get(3)">查看 outerHTML效果</button>
<button onclick="get(4)">查看 outerText效果</button>
</div>
<div>
<button onclick="set(1)">设置 innerHTML效果</button>
<button onclick="set(2)">设置 innerText效果</button>
<button onclick="set(3)">设置 outerHTML效果</button>
<button onclick="set(4)">设置 outerText效果</button>
</div>
<script language="JavaScript">
var $ = document.querySelector.bind(document)
function set(id) {
switch (id) {
case 1:
$('#id1').innerHTML = "<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>"
break
case 2:
$('#id2').innerText = "<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>"
break
case 3:
$('#id3').outerHTML = "<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>"
break
case 4:
$('#id4').outerText = "<i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>"
break
}
}
function get(id) {
switch (id) {
case 1:
alert($('#id1').innerHTML)
break
case 2:
alert($('#id2').innerText)
break
case 3:
alert($('#id3').outerHTML)
break
case 4:
alert($('#id4').outerText)
break
}
}
</script>
</body>
</html>