“赋值”这个词在不同场景下有不同的含义，主要可以分为两大类：
（图片来源网络，侵删）
- 静态赋值：在 HTML 代码中直接写入内容。
- 动态赋值：通过 JavaScript 在网页加载后，根据用户操作、数据变化等来修改内容。
下面我将详细讲解这两种方法,并提供最佳实践。
静态赋值（在 HTML 中直接写）
这是最简单直接的方式,适用于内容在页面加载时就已经确定不变的情况。
直接在 HTML 标签内写入内容
这是最基础的方法,直接把要显示的文本放在 <span> 标签的开始和结束标签之间。
示例代码：
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">静态赋值示例</title>
</head>
<body>
<p>欢迎来到我的网站，<span style="color: red; font-weight: bold;">用户张三</span>！</p>
<p>您的账户余额是：<span style="color: green;">¥ 1,000.00</span></p>
</body>
</html>
说明：
<span>用户张三</span>：这里的“用户张三”就是静态赋的值。style="..."：通常我们也会在<span>上使用 CSS 来赋予它特殊的样式，比如改变颜色、加粗等。
通过 id 或 class 标识，再用 CSS 或 JS 操作
在实际开发中,我们常常不会直接在 HTML 里写样式，而是通过 id 或 class 来给 <span> 做标记，然后在 CSS 或 JavaScript 中进行操作。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">通过ID/Class赋值</title>
<style>
/* 通过 class 赋予样式 */
.highlight {
background-color: yellow;
padding: 2px 4px;
}
/* 通过 id 赋予样式 */
#error-message {
color: red;
font-size: 14px;
display: none; /* 默认隐藏，后面用 JS 控制 */
}
</style>
</head>
<body>
<p>这是一段重要的文本，需要被<span class="highlight">高亮显示</span>。</p>
<p id="status-message">系统状态：<span id="error-message">发生了一个错误！</span></p>
<button onclick="showError()">显示错误</button>
<script>
function showError() {
// 通过 id 获取 span 元素并修改其内容（动态赋值）
const errorSpan = document.getElementById('error-message');
errorSpan.textContent = "用户名或密码错误！"; // 动态修改值
// 显示这个 span
errorSpan.style.display = 'inline';
}
</script>
</body>
</html>
说明：
（图片来源网络，侵删）
<span class="highlight">...</span>：我们给<span>一个class名为highlight，然后在<style>标签里定义了.highlight的样式。<span id="error-message">...</span>：我们给<span>一个唯一的id，这样 JavaScript 就能精确地找到它并操作它。
动态赋值（通过 JavaScript 操作）
需要根据用户交互、服务器返回数据或程序逻辑变化时，就需要使用 JavaScript 来动态地给 <span> 赋值，这是现代 Web 开发中最常见的方式。
核心方法：textContent 和 innerHTML
这是两种最主流的动态赋值方法,它们有重要区别。
| 方法 | 描述 | 安全性 | 性能 | 使用场景 |
|---|---|---|---|---|
element.textContent |
将指定的文本内容赋值给元素。纯文本，不会解析 HTML 标签。 | 高（XSS 防护） | 更快 | 推荐首选，当你只想显示文本，不关心 HTML 结构时。 |
element.innerHTML |
将指定的 HTML 字符串解析并插入到元素中。会解析 HTML。 | 低（有 XSS 风险） | 较慢 | 当你需要在 <span> 内插入包含 HTML 标签的内容时（如加粗、链接等）。 |
示例 1：使用 textContent 赋值（推荐）
假设你有一个从服务器获取的用户名,需要显示在页面上。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">使用 textContent 赋值</title>
</head>
<body>
<h1>欢迎，<span id="username-display">访客</span>！</h1>
<button id="login-btn">模拟登录</button>
<script>
// 模拟从服务器获取的用户名
const fetchedUsername = "李四";
// 为按钮添加点击事件监听器
document.getElementById('login-btn').addEventListener('click', function() {
// 1. 找到目标 span 元素
const usernameSpan = document.getElementById('username-display');
// 2. 使用 textContent 动态赋值
usernameSpan.textContent = fetchedUsername;
// 3. （可选）可以同时修改样式
usernameSpan.style.color = 'blue';
usernameSpan.style.fontWeight = 'bold';
});
</script>
</body>
</html>
步骤解析：
<span id="username-display">访客</span>：先在 HTML 中放一个<span>，并给它一个唯一的id，方便 JS 找到它，初始值可以设为默认值（如“访客”）。document.getElementById('username-display')：在 JavaScript 中，通过这个id获取到<span>对象。usernameSpan.textContent = fetchedUsername：将变量fetchedUsername的值（"李四"）设置为该<span>的文本内容。
示例 2：使用 innerHTML 赋值（需谨慎）
假设你想显示一个包含链接的欢迎信息。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">使用 innerHTML 赋值</title>
</head>
<body>
<p>系统消息：<span id="system-message">等待中...</span></p>
<script>
// 模拟从服务器获取的 HTML 字符串
const messageWithLink = '请访问我们的 <a href="https://example.com" target="_blank">帮助中心</a>。';
// 获取 span 元素
const messageSpan = document.getElementById('system-message');
// 使用 innerHTML 赋值，它会解析并渲染 <a> 标签
messageSpan.innerHTML = messageWithLink;
</script>
</body>
</html>
⚠️ 重要警告：使用 innerHTML 的安全风险
messageWithLink 的内容来自不可信的用户输入（比如一个评论框），恶意用户可以注入恶意的 JavaScript 代码，这被称为 XSS (跨站脚本攻击)。
错误示例（非常危险）：
const userInput = "<script>alert('你被攻击了！')</script>"; // 恶意输入
document.getElementById('my-span').innerHTML = userInput; // 这段恶意代码会被执行！
安全实践：
- 永远不要将用户直接输入的内容用
innerHTML插入到页面中。 - 如果必须使用
innerHTML，确保所有插入的 HTML 都经过严格的净化和转义处理。 - 在 99% 的情况下，
textContent是更安全、更合适的选择。
总结与最佳实践
- 固定不变，直接写在 HTML 里即可，配合
class或id使用 CSS 美化。 - ：首选
element.textContent来修改<span>的文本，它安全、高效，且不会意外地解析 HTML。 - 谨慎使用
innerHTML：仅在需要插入可信的、包含 HTML 结构时使用，并时刻警惕 XSS 风险。 - 可访问性：给
<span>赋值时，确保其内容对屏幕阅读器等辅助技术是友好的。<span>本身没有语义，但它的内容应该有意义。
通过以上方法,你就可以灵活地在各种场景下为 <span> 标签赋值了。
