### JavaScript 中 `
innerHTML`、`
innerText`
和 `
textContent` 的
区别、用法
与场景
#### 1. 定义
与功能
- **`
innerHTML`**
用于获取或设置指定元素的 HTML 内容，包括子标签及其内容。它返回的内容是完整的 HTML 字符串，包含所有嵌套的标签
和文本节点[^5]。
示例：
```javascript
const div = document.getElementById('d1');
console.log(div.
innerHTML); // 输出: "123 <p>这里面是p标签的内容</p> <!-- 这是注释 --> <span>span</span>"
```
- **`
innerText`**
用于获取或设置指定元素的纯文本内容，不包含任何 HTML 标签。它会考虑样式（如隐藏元素）
和布局（如换行符），并且在某些浏览器中可能不会返回注释或未显示的内容[^4]。
示例：
```javascript
const div = document.getElementById('d1');
console.log(div.
innerText); // 输出: "123 这里面是p标签的内容 span"
```
- **`
textContent`**
类似于 `
innerText`，但它返回的是所有子节点的文本内容，包括隐藏元素
和注释中的文本。它的性能通常优于 `
innerHTML`，因为它不会解析 HTML[^1]。
示例：
```javascript
const div = document.getElementById('d1');
console.log(div.
textContent); // 输出: "123 这里面是p标签的内容 span"
```
#### 2. 主要
区别
| 属性 | 获取内容类型 | 是否解析 HTML | 是否包含隐藏内容 | 性能 |
|--------------|-----------------------------|----------------|-------------------|------------|
| `
innerHTML` | 包含 HTML 的完整内容 | 是 | 否 | 较低 |
| `
innerText` | 纯文本内容，受样式影响 | 否 | 否 | 中等 |
| `
textContent` | 纯文本内容，不受样式影响 | 否 | 是 | 较高 |
#### 3. 使用场景
- **`
innerHTML`**
当需要操作或读取包含 HTML 结构的内容时使用，例如动态生成页面元素或从服务器加载 HTML 片段[^5]。
示例：
```javascript
const div = document.getElementById('d1');
div.
innerHTML = '<p>新内容</p>'; // 替换原有内容为新的 HTML
```
- **`
innerText`**
当只需要操作可见的纯文本内容，并且希望忽略隐藏元素或注释时使用。适合用于简单的文本提取或修改[^4]。
示例：
```javascript
const div = document.getElementById('d1');
div.
innerText = '仅文本'; // 替换为纯文本，移除所有 HTML
```
- **`
textContent`**
当需要操作所有子节点的文本内容，包括隐藏元素
和注释时使用。适合用于防止 XSS 攻击或提高性能的场景[^1]。
示例：
```javascript
const div = document.getElementById('d1');
div.
textContent = '全部文本'; // 替换为纯文本，保留隐藏内容
```
#### 4. 注意事项
- `
innerText` 在 Firefox 中可能存在兼容性问题，因此在跨浏览器开发中应谨慎使用。
- 如果需要输出不含 HTML 标签的内容，可以结合正则表达式处理 `
innerHTML` 的结果。
- 使用 `
textContent` 可以避免解析 HTML，从而提升性能并防止潜在的安全问题。
---
###
本文介绍了innerHTML、innerText和textContent三个属性的区别。innerHTML返回或设置带有HTML标签的文本内容；innerText返回或设置纯文本内容，不包括HTML标签；textContent返回或设置指定节点及其后代的所有文本内容。当设置textContent时，所有子节点将被删除并替换为一个包含指定字符串的文本节点。
扫一扫
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
