LitePicker / date picker js - 在日期的当前锚点内添加额外的 div

Question

我目前正在做一个小项目，我被要求对日期选择器做一些特定的样式设计——这个日期选择器库正在使用 LitePicker.js。唯一的问题是要做到这一点，我需要在包含日期的当前锚点内添加一个额外的 div。

目前 html 看起来像这样：

<a href="#" class="day-item is-start-date" data-time="1591830000000">11</a>

但我需要它看起来像这样：

<a href="#" class="day-item is-start-date" data-time="1591830000000"><span class="date">11</span></a>

文档中没有关于如何通过 api:

执行此操作的示例

我可以在同一范围内使用 THIS 方法来附加一个 span 标签来执行此操作吗？

以下是 CodePen 中的基本设置：

任何帮助将不胜感激。

谢谢

Answer 1

下面的代码将用 span 标签包裹每个选定元素的文本：

for (let a of document.querySelectorAll("div.container__days a")) {
    a.innerHTML = "<span>" + a.innerText + "</span>"
}

我选择的选择器 ("div.container__days a") 是适用于 https://wakirin.github.io/Litepicker/ 的选择器，但您可以根据需要进行更改。

思路很简单，就是将a标签中包含的HTML进行改造，增加一个span。

注意：我用一个按钮来说明 DOM 在你点击它之前有时间加载，但你也可以使用 setTimeout。这样做的目的是让 DOM 有时间使用 Litepicker 创建的元素进行更新。

LitePicker / date picker js - Adding an extra div inside the current anchor of the date