innerText：写入页面动态文本的正确方式
在操作网页内容时，经常需要向用户显示一些动态信息，比如密码强度提示、表单验证消息，或者根据用户操作实时变化的文本。这时候，innerText 属性就派上了用场。
innerText 可以用来向 HTML 元素中写入动态文本。最关键的一点是，通过它设置的内容，不会被浏览器当作 HTML 标签来解析，而是会老老实实地显示为普通的文本。这一点特性，让它成为了在页面上显示纯文本动态内容的可靠选择。
在我的日常开发中，innerText 的出现频率相当高。比如实时显示密码强度、更新计数器数值，或者根据后台返回的数据更新提示信息，用起来非常顺手。
为什么不用 innerHTML？
你会想到另一个类似的属性 innerHTML。它俩的核心区别在于对内容的解析方式：
-
innerText：只认纯文本。即使你给它一串包含 HTML 标签的字符串，它也会把标签符号原样显示出来，不会生效。这避免了潜在的安全风险，比如不小心执行了恶意脚本。
-
innerHTML：会解析字符串中的 HTML 标签，并将渲染为对应的页面元素。
所以，一个重要的个人经验是：除非你确实需要动态地插入结构化的 HTML 标签（并且能确保内容的安全性），否则都应该优先使用 innerText 来更新文本内容。 用 innerHTML 来设置简单的文本，有点大材小用，而且不够安全。对于显示密码强度这类纯粹的文字反馈，innerText 是更合适的选择。
核心要点解析
-
动态文本写入：
innerText能够获取或设置指定元素中的文本内容。当用它设置新内容时，会替换掉元素里原有的内容。 -
纯文本特性：它会自动对 HTML 标签进行转义处理，确保它们以普通字符的形式展示。这是
innerText最核心的特性。 -
使用场景：非常适合用于生成需要动态变化的用户提示，：
-
表单验证的错误或成功信息
-
密码强度实时反馈
-
用户操作后的状态提示
-
从服务器获取并显示纯文本数据
-
基础示例：实时密码强度提示
我们来编写一个更贴近实际学习的例子。假设我们想在代码号上分享一个关于密码强度的即时反馈功能，让用户在输入密码时就能看到当前密码的强度水平。
这个例子中，当用户在输入框松开键盘按键时，会触发 checkPwdStrength 函数，函数根据密码长度给出不同的提示文本，然后通过 innerText 将提示信息更新到页面上的指定位置。
<!DOCTYPE html>
<html>
<head>
<title>innerText 密码强度示例 - 代码号学习</title>
<style>
.strength-text { font-weight： bold； padding-left： 8px； }
.weak { color： #d32f2f； }
.medium { color： #f57c00； }
.strong { color： #388e3c； }
</style>
</head>
<body>
<h3>代码号教程：体验 innerText 的实时反馈</h3>
<form name="pwdForm">
<label for="password">设置密码：</label>
<input type="password" id="password" name="userPwd" onkeyup="checkPwdStrength()" placeholder="输入不少于6位密码">
<br><br>
密码强度：<span id="strengthDisplay" class="strength-text">尚未输入</span>
</form>
<script type="text/javascript">
function checkPwdStrength() {
var pwdInput = document.getElementById('password').value；
var strengthMsg；
var displayElement = document.getElementById('strengthDisplay');
// 根据密码长度给出不同强度的反馈
if (pwdInput.length === 0) {
strengthMsg = “尚未输入”；
// 移除所有强度相关的样式类
displayElement.className = “strength-text”；
} else if (pwdInput.length < 4) {
strengthMsg = “弱 (太短)”；
displayElement.className = “strength-text weak”；
} else if (pwdInput.length >= 4 && pwdInput.length <= 8) {
strengthMsg = “中”；
displayElement.className = “strength-text medium”；
} else {
strengthMsg = “强 (长度合适)”；
displayElement.className = “strength-text strong”；
}
// 使用 innerText 更新提示信息
displayElement.innerText = strengthMsg；
}
</script>
<p>注意：<strong>innerText</strong> 将强度消息作为纯文本更新到 span 标签中，即使消息内容包含“<”或“>”等字符，也会被安全地显示为文本。</p>
</body>
</html>
在这个例子中，我们不仅更新了文字，还根据不同的强度等级，动态地改变了文字的颜色。这是通过修改元素的 className 属性实现的。你可以复制这段代码，在本地运行体验一下。
进阶建议：用户体验
在编写类似功能时，除了使用 innerText 更新文本，还可以结合 CSS 来改变提示信息的颜色、图标（可以用纯 CSS 字符代替图片）等，给用户更直观的视觉反馈。比如密码为“弱”时显示红色，“强”时显示绿色，这样交互会更友好。
