本文介绍如何在不修改 HTML 结构的前提下，通过 innerHTML + CSS 类名动态为 JavaScript 中生成的文本（如玩家名称）添加颜色、字体粗细等样式，实现语义化与视觉表现的分离。
本文介绍如何在不修改 html 结构的前提下，通过 `innerhtml` + css 类名动态为 javascript 中生成的文本（如玩家名称）添加颜色、字体粗细等样式，实现语义化与视觉表现的分离。
在 JavaScript 中操作 DOM 文本时，若仅使用 textContent，则无法嵌入任何 HTML 标签或样式——它会将所有内容作为纯文本处理，自动转义 HTML 字符。而要实现对其中某一部分（例如玩家姓名）进行差异化样式控制（如红色/蓝色、加粗、放大字号），必须改用 innerHTML，并配合 等内联元素包裹目标文本，再通过 CSS 类精准控制样式。
以下是一个可直接集成到您现有井字棋逻辑中的优化方案：
✅ 步骤一：替换 textContent 为 innerHTML
在您的 makeMove() 函数末尾，更新玩家提示信息时，不再使用：
resultDiv.textContent = "It's your turn " + getCurrentPlayerName();
而是调用一个封装好的函数，返回带样式的 HTML 字符串：
立即学习“Java免费学习笔记（深入）”；
// 替换原代码中该行：
const resultDiv = document.getElementById("current-player");
resultDiv.innerHTML = getCurrentPlayerMessage(); // ✅ 使用 innerHTML✅ 步骤二：定义样式化消息生成函数
function getCurrentPlayerMessage() {
const playerName = getCurrentPlayerName();
const playerClass = currentPlayer === 1 ? "player-x" : "player-o";
return `It's your turn <span class="${playerClass}">${playerName}</span>`;
}? 提示：此处使用语义化类名（如 player-x / player-o）比 red-player / blue-player 更具可维护性，便于未来扩展主题或适配深色模式。
✅ 步骤三：编写对应 CSS 规则（推荐放入 style.css 或
.player-x {
color: #e74c3c; /* 鲜红色 */
font-weight: bold;
font-size: 1.2em;
}
.player-o {
color: #3498db; /* 深蓝色 */
font-weight: bold;
font-size: 1.2em;
}
/* 可选：为 span 添加轻微动画增强反馈 */
.player-x, .player-o {
transition: transform 0.2s ease, color 0.2s ease;
}
.player-x:hover, .player-o:hover {
transform: scale(1.05);
}⚠️ 注意事项与最佳实践
- 安全第一：确保 getCurrentPlayerName() 返回的内容是可信的（如来自常量或受控枚举），避免 XSS 风险。若名称可能含用户输入，请先做 HTML 转义（例如用 DOMPurify.sanitize() 或手动替换 &"）。
- 语义优于样式：不要用 style="color:red" 写内联样式，坚持用 CSS 类——这有利于主题切换、无障碍支持（如 prefers-color-scheme）和团队协作。
- 避免重复查询 DOM：像 document.getElementById("current-player") 这类操作建议缓存为常量（如 const currentPlayerEl = document.getElementById("current-player");），提升性能。
- 兼容性无忧：innerHTML 和 CSS 类选择器在所有现代浏览器及 IE9+ 均完全支持，无需 Polyfill。
通过以上三步，您即可在保持原有逻辑结构不变的前提下，优雅地为动态文本中的关键部分赋予视觉层次——让“X”更醒目、“O”更沉稳，既提升用户体验，也体现专业前端工程素养。
