本文介绍如何在 JavaScript 渲染的 UI 中，对函数返回的动态文本（如玩家名称）进行精细化样式控制——通过 innerHTML 注入带类名的 <span> 元素，并配合 CSS 实现颜色、字体粗细等差异化渲染。
本文介绍如何在 javascript 渲染的 ui 中，对函数返回的动态文本（如玩家名称）进行精细化样式控制——通过 `innerhtml` 注入带类名的 `` 元素，并配合 css 实现颜色、字体粗细等差异化渲染。
在前端开发中，仅使用 textContent 可保证内容安全、防止 XSS，但会丢失所有 HTML 结构与样式能力。当你需要高亮显示某一部分动态文本（例如将玩家名 “James” 设为红色加粗、“Giant” 设为蓝色加粗），就必须改用 innerHTML，并配合语义化标签（如 <span>）和预定义 CSS 类。
核心思路是：分离静态文案与动态高亮内容，用 HTML 片段组合最终消息，再交由 CSS 控制视觉表现。
以下是在你原有 makeMove() 逻辑中集成该方案的推荐写法：
function updateCurrentPlayerDisplay() {
const resultDiv = document.getElementById("current-player");
const playerName = getCurrentPlayerName();
const playerClass = currentPlayer === 1 ? "player-x" : "player-o";
// 使用 innerHTML 插入带样式的 span
resultDiv.innerHTML = `It's your turn <span class="${playerClass}">${playerName}</span>`;
}然后，在你的 CSS 文件（如 style.css）中定义对应样式：
立即学习“Java免费学习笔记（深入）”；
.player-x {
color: #e74c3c;
font-weight: bold;
font-size: 1.2em;
}
.player-o {
color: #3498db;
font-weight: bolder;
font-size: 1.2em;
}⚠️ 重要注意事项：
- ✅ 必须使用 innerHTML（而非 textContent）：只有 innerHTML 支持解析 HTML 标签并应用样式；
- ✅ 确保 getCurrentPlayerName() 返回纯文本（无用户输入或未转义 HTML），避免 XSS 风险；若名称来自用户输入，需先做 HTML 转义（如使用 DOMPurify.sanitize() 或手动替换 <, > 等字符）；
- ✅ CSS 类名应语义清晰、可维护：推荐用 player-x/player-o 而非 red-player/blue-player，便于未来更换主题色时无需修改 JS；
- ❌ 避免在模板字符串中拼接不可信内容：如 innerHTML = "...<span>" + unsafeInput + "</span>" 是危险模式，务必校验或转义。
最后，在你的游戏主逻辑中，将 updateCurrentPlayerDisplay() 替换原 textContent 赋值位置。例如，在 makeMove() 的玩家切换分支末尾添加：
} else {
currentPlayer = currentPlayer === 1 ? 2 : 1;
updateCurrentPlayerDisplay(); // ✅ 替代原来的 textContent 赋值
}这样，每次轮到不同玩家时，“It's your turn” 保持默认样式，而玩家名则自动获得专属配色与强调效果，既保持代码可读性，又提升用户体验的专业感。
