概述
INLINECODE6dcff650 和 INLINECODEd7bdb2d7 都是 JavaScript 中的重要属性。然而，在处理指定文本的具体方式上，两者存在显著差异。让我们来仔细看看这两个属性的语法。
语法
假设我们有一个 JavaScript 变量 elem，它保存了从页面中选中的某个元素：
let elem = document.getElementById(‘test-btn‘);
我们可以按照以下方式来使用 textContent 和 innerHTML 属性：
textContent 属性
这个属性用于获取或设置指定节点及其所有后代的文本内容。
elem.textContent
innerHTML 属性
这个属性用于获取或设置某个元素的 HTML 内容（包含 HTML 标记）。
elem.innerHTML
示例
下面的示例展示了 DOM 中 innerHTML 和 textContent 属性的区别。
代码演示
Document
GeeksforGeeks
The following element contains some
bold and
some italic text.
function textContentfn() {
let elem =
document.getElementById(‘test-btn‘);
alert(elem.textContent);
}
function innerHTMLfn() {
let elem =
document.getElementById(‘test-btn‘);
alert(elem.innerHTML);
}
运行结果
通过运行上述代码，我们可以直观地看到两者的区别。点击相应的按钮，我们会发现 alert 弹出的内容截然不同：
- textContent：仅显示纯文本，会忽略内部的标签，但保留文本结构。
- innerHTML：显示包含 HTML 标签的完整字符串。
差异对比表
为了更清晰地理解，我们可以通过下表对比这两个属性的核心区别：
textContent
—
该属性用于获取或设置元素的 纯文本内容。它不会自动编码或解码文本，这意味着它让我们可以专注于内容部分，而不受 HTML 标签的干扰，且比 innerHTML 性能更好、更安全。