jQuery中如何正确拼接文本与HTML元素？日历组件头部DOM构建问题求解

首先来说你的核心问题：为什么当前的jQuery代码无法得到预期的HTML结构？因为你多次调用了.html()方法——这个方法会清空元素内部的所有现有内容，然后设置新内容，所以最后只会保留最后一次.html(sYear)和后续append的内容，之前的月份和第一个箭头都被覆盖了。

下面是两种正确的实现方式，以及关于文本包裹的建议：

正确构建目标HTML的方法 #

你的目标结构是：

<th id="thNow">July<span class="scrollArrow"><img src="/UpDownArrow.png" /></span>, 2022<span class="scrollArrow"><img src="/UpDownArrow.png" /></span></th>

方法1：链式调用.append()追加内容 #

.append()会在元素现有内容的末尾添加新内容，不会覆盖之前的内容，按顺序拼接即可：

var thNow = $("<th></th>", { id: "thNow" })
  // 添加月份文本
  .append(sMonth)
  // 添加第一个滚动箭头的span
  .append($("<span></span>", { "class": "scrollArrow" })
    .append($("<img />", { "src": "/UpDownArrow.png" })))
  // 添加分隔文本", "
  .append(", ")
  // 添加年份文本
  .append(sYear)
  // 添加第二个滚动箭头的span
  .append($("<span></span>", { "class": "scrollArrow" })
    .append($("<img />", { "src": "/UpDownArrow.png" })));

方法2：直接拼接HTML字符串（更直观） #

如果结构不算复杂，直接拼接完整的HTML字符串再赋值给元素，代码会更简洁：

var thContent = `${sMonth}<span class="scrollArrow"><img src="/UpDownArrow.png" /></span>, ${sYear}<span class="scrollArrow"><img src="/UpDownArrow.png" /></span>`;
var thNow = $("<th></th>", { id: "thNow", html: thContent });

关于是否需要用标签包裹文本 #

对于纯文本（比如", "），不是必须用span/div包裹，直接添加文本节点就可以。但考虑到你后续要给月份和年份添加点击选择功能，建议提前用<a>标签把它们包裹起来——这样后续绑定点击事件、修改样式、添加链接都会更方便，示例如下：

var thNow = $("<th></th>", { id: "thNow" })
  // 用a标签包裹月份，方便后续做选择器
  .append($("<a></a>", { href: "#", text: sMonth, class: "month-selector" }))
  .append($("<span></span>", { "class": "scrollArrow" })
    .append($("<img />", { "src": "/UpDownArrow.png" })))
  .append(", ")
  // 用a标签包裹年份
  .append($("<a></a>", { href: "#", text: sYear, class: "year-selector" }))
  .append($("<span></span>", { "class": "scrollArrow" })
    .append($("<img />", { "src": "/UpDownArrow.png" })));

之后你只需要给.month-selector和.year-selector绑定点击事件，弹出对应的选择面板即可。

后续日历组件的实现思路 #

你想要搭建类似Calendly的站点，合并Google/Office日历、支持事件添加，完全可以实现，给你几个核心方向：

• 第三方API集成：
  • Google日历：使用Google Calendar API，需要通过OAuth2完成用户授权，获取日历的读写权限，实现事件查询、创建等操作。
  • Office 365日历：使用Microsoft Graph API，同样需要OAuth2授权，对接日历相关接口。
  • 注意：不要在前端直接暴露API密钥，建议搭建一个后端服务（比如Node.js、PHP）作为中间层，接管授权和API请求。
• 核心功能实现：
  • 日历视图渲染：可以基于你现有的组件扩展，或者参考成熟日历库的逻辑（比如月视图、周视图的日期计算），处理事件的展示和时间冲突检测。
  • 事件管理：实现点击日期创建事件、编辑已有事件，同时要同步到绑定的Google/Office日历。
  • 权限控制：如果支持他人添加事件，需要区分公开/私有事件，或者实现邀请制的事件添加逻辑。
• 交互优化：比如月份/年份选择器的弹窗、事件拖拽调整时间、冲突提醒等，提升用户体验。

总结一下：不需要把所有文本都包裹在标签里，但需要交互的元素（可点击的月份、年份）一定要用标签包裹，这不仅方便开发，也符合HTML语义化的要求。

内容的提问来源于stack exchange，提问作者Seth D. Fulmer