JavaScript innerText
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 innerText 属性。此属性对于处理 DOM 元素的文本内容至关重要，它提供了一种获取或设置人类可读文本的简单方法。
基本定义
innerText 属性表示节点及其后代的可渲染文本内容。它只返回可见文本，忽略隐藏的元素，并保留空格和换行符。
与 textContent 不同，innerText 了解样式和 CSS。它不会返回隐藏元素的文本，并且会尊重视觉布局，包括由 CSS 引起的换行符。
innerText 的基本用法
本示例演示了如何使用 innerText 获取和设置文本内容。
<!DOCTYPE html>
<html>
<head>
<title>Basic innerText</title>
</head>
<body>
<div id="content">Hello <span>World</span>!</div>
<button onclick="showText()">Show Text</button>
<script>
function showText() {
const element = document.getElementById('content');
alert(element.innerText);
}
</script>
</body>
</html>
在这个基本示例中，我们有一个包含文本和一个 span 的 div 元素。当单击按钮时，showText 函数会检索该元素并使用 innerText 显示其文本内容。
警报将显示“Hello World！”因为 innerText 结合了所有可见的文本内容，包括子元素内的文本。它保留了单词之间的空格，但忽略了 HTML 标签。
innerText 与 textContent 的区别
本示例演示了 innerText 和 textContent 之间的区别。
<!DOCTYPE html>
<html>
<head>
<title>innerText vs textContent</title>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<div id="example">
Visible text
<span class="hidden">Hidden text</span>
<div>More text</div>
</div>
<script>
const element = document.getElementById('example');
console.log('innerText:', element.innerText);
console.log('textContent:', element.textContent);
</script>
</body>
</html>
本示例显示了一个带有可见和隐藏文本内容的 div。JavaScript 会记录 innerText 和 textContent 的值。
innerText 只会返回“Visible text More text”，而 textContent 会包含隐藏文本。此外，innerText 的性能负担较重，因为它需要布局信息。
使用 innerText 设置文本
本示例演示了如何使用 innerText 设置文本内容。
<!DOCTYPE html>
<html>
<head>
<title>Setting Text</title>
</head>
<body>
<div id="output">Original content</div>
<button onclick="updateText()">Update Text</button>
<script>
function updateText() {
const output = document.getElementById('output');
output.innerText = 'New content with\nline breaks';
}
</script>
</body>
</html>
这里我们有一个 div 元素和一个按钮。单击时，按钮会使用带有换行符的字符串使用 innerText 更新 div 的内容。
字符串中的换行符将呈现为 HTML 中的实际换行符，因为 innerText 在设置内容时会保留空格和换行符。这与 HTML 解析行为不同。
带格式内容的 innerText
本示例演示了 innerText 如何处理格式化内容。
<!DOCTYPE html>
<html>
<head>
<title>Formatted Content</title>
</head>
<body>
<div id="formatted" style="white-space: pre-wrap;">
This text has extra spaces
And multiple
lines
</div>
<button onclick="showFormattedText()">Show Text</button>
<script>
function showFormattedText() {
const element = document.getElementById('formatted');
alert(element.innerText);
}
</script>
</body>
</html>
本示例显示了一个带有额外空格和换行符的 div，并使用 white-space: pre-wrap 进行样式设置。按钮使用 innerText 显示文本。
警报将显示文本的渲染方式完全相同，保留了空格和换行符。这表明 innerText 如何尊重文本的视觉呈现，包括影响文本布局的 CSS 样式。
安全注意事项
本示例说明了为什么 innerText 比 innerHTML 对用户内容更安全。
<!DOCTYPE html>
<html>
<head>
<title>Security Example</title>
</head>
<body>
<div id="safeOutput"></div>
<div id="unsafeOutput"></div>
<button onclick="testSecurity()">Test Security</button>
<script>
function testSecurity() {
const userInput = '<script>alert("XSS")</script>';
document.getElementById('safeOutput').innerText = userInput;
document.getElementById('unsafeOutput').innerHTML = userInput;
}
</script>
</body>
</html>
本示例在处理潜在的恶意用户输入时比较了 innerText 和 innerHTML。按钮会触发这两种方法。
innerText 版本会将 script 标签显示为文本，从而防止 XSS 攻击。innerHTML 版本会尝试执行脚本。这表明了为什么 innerText 对用户生成的内容更安全。
来源
在本文中，我们展示了如何在 JavaScript 中使用 innerText 属性。此属性对于在 Web 开发中安全地处理文本内容至关重要。
作者
列出 所有 JS DOM 教程。