innerHTML
innerHTML获取或设置元素的所有内部HTML内容，包括文本和HTML标签，可以理解为元素内部的HTML代码。
测试代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<style>
.hidden {
display: none;
}
</style>
<div id="parent">
this is <strong>parent</strong> text
<div id="child">
hello!
how are you? <span></span>
<br>
this is child text
<p class="hidden">this is hidden content by css from child</p>
</div>
</div>
<script>
const parentEl = document.getElementById('parent');
console.log(parentEl.innerHTML);
</script>
|
输出结果：
1
2
3
4
5
6
7
8
9
| this is <strong>parent</strong> text
<div id="child">
hello!
how are you? <span></span>
<br>
this is child text
<p class="hidden">this is hidden content by css from child</p>
</div>
|
innerText
innerText获取或设置元素的可见文本内容，不包含HTML标签和隐藏不可见的文本内容。如下所示，用css隐藏及\n等不显示的内容不会返回。
测试代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<style>
.hidden {
display: none;
}
</style>
<div id="parent">
this is <strong>parent</strong> text
<div id="child">
hello!
how are you? <span></span>
<br>
this is child text
<p class="hidden">this is hidden content by css from child</p>
</div>
</div>
<script>
const parentEl = document.getElementById('parent');
console.log(parentEl.innerText);
</script>
|
输出结果：
1
2
3
| this is parent text
hello! how are you?
this is child text
|
textContent
textContent获取或设置元素的所有文本内容，包括换行、空格、css隐藏的内容等，不包括HTML标签。
测试代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<style>
.hidden {
display: none;
}
</style>
<div id="parent">
this is <strong>parent</strong> text
<div id="child">
hello!
how are you? <span></span>
<br>
this is child text
<p class="hidden">this is hidden content by css from child</p>
</div>
</div>
<script>
const parentEl = document.getElementById('parent');
console.log(parentEl.textContent);
</script>
|
输出结果：
1
2
3
4
5
6
7
8
| this is parent text
hello!
how are you?
this is child text
this is hidden content by css from child
|
