在 HTML 中通过 JavaScript 动态插入年份（如版权末两位）时，因换行或空白符导致单引号 ' 与年份间出现意外空格，本文提供两种可靠方案：精简 DOM 操作去除源码空白，或采用语义化 <span> 占位+脚本赋值，从根本上规避文本节点间的空白干扰。

在 html 中通过 javascript 动态插入年份（如版权末两位）时，因换行或空白符导致单引号 `'` 与年份间出现意外空格，本文提供两种可靠方案：精简 dom 操作去除源码空白，或采用语义化 `` 占位+脚本赋值，从根本上规避文本节点间的空白干扰。

HTML 中的文本节点会严格保留源码中的空白字符（包括换行、制表符和空格）。在原始代码中：

<p id="copyright">
&copy; &apos;
<script>
document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear().toString().substr(-2)))
</script>
Company Name
</p>

' 后的换行符被解析为一个空白文本节点，紧接着是 <script> 插入的年份文本节点（如 "24"），两者之间自然产生一个空格，最终渲染为 © ' 24 Company Name。

✅ 方案一：消除源码空白（轻量但需谨慎）

将 ' 与 <script> 标签紧邻书写，删除所有中间空白：

<p id="copyright">
&copy; &apos;<script>
document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear().toString().substr(-2)));
</script>Company Name
</p>

⚠️ 注意：<script> 标签后不能有换行或空格，且 Company Name 前也需紧贴 </script>（或用注释消除空白），否则仍会引入空格。此法虽简洁，但可读性差、易出错，不推荐用于复杂项目。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

立即学习“Java免费学习笔记（深入）”；

✅ 方案二：语义化占位 + 脚本控制（推荐）

使用 <span> 明确标识动态内容区域，并通过 textContent 直接赋值，完全绕过空白节点干扰：

<p id="copyright">
  &copy; &apos;<span id="copyright-year"></span>Company Name
</p>

// 确保 DOM 加载完成后执行（如放在 </body> 前，或使用 DOMContentLoaded）
const copyrightYear = new Date().getFullYear().toString().substr(-2);
document.querySelector('#copyright-year').textContent = copyrightYear;

✅ 关键点：

• <span id="copyright-year"></span> 必须紧贴 '（即 '<span...> 之间无空格/换行）；
• 使用 textContent 而非 innerHTML，避免 XSS 风险且性能更优；
• 此结构清晰、可维护性强，支持 CSS 样式定制（如 .copyright-year { font-weight: bold; }）。

? 总结

HTML 空白敏感性是前端常见陷阱。与其反复调试空白字符，不如采用“结构先行、逻辑后置”的现代实践：用语义化标签定义动态位置，用 JavaScript 精准控制内容。这样既保证渲染准确性，又提升代码健壮性与团队协作效率。