
在 HTML 中通过 JavaScript 动态插入年份(如版权年份后两位)时,常因换行或空白符导致 ' 与数字间出现意外空格;本文提供两种可靠方案:直接移除源码空白,或采用语义化 DOM 插入,确保字符紧贴无间隙。
在 html 中通过 javascript 动态插入年份(如版权年份后两位)时,常因换行或空白符导致 `'` 与数字间出现意外空格;本文提供两种可靠方案:直接移除源码空白,或采用语义化 dom 插入,确保字符紧贴无间隙。
HTML 中的文本节点会忠实保留源码中的空白字符(包括换行、制表符和空格)。在原始写法中:
<p id="copyright">
© '<script>
document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear().toString().substr(-2)))
</script>
Company Name
</p>' 后的换行符被解析为一个空白文本节点,导致 ' 和 24 之间出现不可见但实际存在的空格(渲染为 © ' 24 Company Name)。
✅ 方案一:消除源码空白(轻量、即时)
将 <script> 标签紧贴 ',不留任何空白或换行:
<p id="copyright">
© '<script>
document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear().toString().substr(-2)));
</script>Company Name
</p>⚠️ 注意:<script> 结束标签 </script> 之后必须立即接 Company Name(无换行、无空格),否则仍会引入空白节点。
✅ 方案二:结构化 DOM 操作(推荐、可维护)
使用独立 <span> 占位,并通过 textContent 写入——完全规避 HTML 文本节点的空白干扰:
<p id="copyright"> © '<span id="copyright-year"></span>Company Name </p>
const copyrightYear = new Date().getFullYear().toString().substr(-2);
document.querySelector('#copyright-year').textContent = copyrightYear;? 关键要点:
立即学习“Java免费学习笔记(深入)”;
- <span id="copyright-year"></span> 必须紧邻 '(中间不能有空格或换行);
- 使用 textContent 而非 innerHTML,避免 XSS 风险且语义清晰;
- 此方式便于后续维护(如添加 CSS 类、国际化年份格式等)。
? 补充建议:若需兼容更早年份(如 2001 → '01),substr(-2) 在 getFullYear() < 100 时可能返回单字符,应改用 String(year).padStart(4, '0').slice(-2) 确保始终两位数:
const year = new Date().getFullYear();
const lastTwo = String(year).padStart(4, '0').slice(-2); // 安全获取末两位
document.querySelector('#copyright-year').textContent = lastTwo;最终效果统一为:© '24 Company Name ——无多余空格,语义清晰,易于扩展。


















