如何在JavaScript的Prev/Next按钮间插入文本（日期）

我有一段JavaScript标签页脚本，Prev和Next按钮功能正常，但需要在按钮之间插入日期，预期呈现样式如下：

btnPrev issueDate btnNext
<     Date     >

我已经在代码里添加了日期span元素，但页面上没渲染出来，请问怎么实现按钮间插入文本？我添加的代码片段：

type: "span",
textContent: "November 1, 2022",
...this.btnIssue,
});

核心问题是你创建了日期span元素，但没有将它添加到DOM结构中——当前代码仅把Prev和Next按钮追加到了导航容器，漏掉了日期元素。只需做两处修改即可实现需求：

1. 补充日期元素的自定义配置支持
   在构造函数的默认配置里添加btnIssue属性，方便后续自定义日期span的样式或属性：

Object.assign(
    this, {
        // ... 其他原有配置
        btnIssue: {}, // 新增：用于自定义日期span的属性
    },
    options
);

同时创建日期元素时，要合并这个自定义配置（注意span元素不需要type属性，直接删除即可）：

this.EL_issue = this._ELNew("span", {
    textContent: "November 1, 2022",
    ...this.btnIssue, // 应用自定义属性
});

2. 将日期元素插入到导航容器中
   修改_init方法里的导航元素追加逻辑，把日期span放在Prev和Next按钮中间：

this.EL_navigation.forEach((EL) => EL.append(this.EL_prev, this.EL_issue, this.EL_next));

constructor(selector, options = {}) {
    Object.assign(
        this, {
            EL: document.querySelector(selector),
            page: 0,
            selector,
            btnPrev: {}, // 自定义Prev按钮属性
            btnNext: {}, // 自定义Next按钮属性
            btnIssue: {}, // 自定义日期span属性
            classActive: "is-active",
            onChange: () => {},
        },
        options
    );
    this.EL_pages = this.EL.children;
    this.EL_pagination = document.querySelectorAll(`[data-tabs-pagination="${this.selector}"]`);
    this.EL_navigation = document.querySelectorAll(`[data-tabs-navigation="${this.selector}"]`);
    this.total = this.EL_pages.length;
    this.EL_prev = this._ELNew("button", {
        type: "button",
        textContent: "<",
        onclick: () => this.prev(),
        ...this.btnPrev,
    });
    this.EL_issue = this._ELNew("span", {
        textContent: "November 1, 2022",
        ...this.btnIssue,
    });
    this.EL_next = this._ELNew("button", {
        type: "button",
        textContent: ">",
        onclick: () => this.next(),
        ...this.btnNext,
    });
    this.EL_buttons = Array.from(Array(this.total)).reduce((arr, _, i) => {
        const EL_btn = this._ELNew("button", {
            type: "button",
            textContent: i + 1,
            onclick: () => (this._page = i),
            ...this.btnPagination,
        });
        arr.push(EL_btn);
        return arr;
    }, []);
    this._init();
}

// 工具函数：创建新元素
_ELNew = (sel, attr) => Object.assign(document.createElement(sel), attr || {});

// 处理负数模运算，确保页码合法
_mod = (n) => ((n % this.total) + this.total) % this.total;

// 初始化
_init() {
    // 追加分页按钮到DOM
    this.EL_pagination.forEach((EL) => EL.append(...this.EL_buttons));
    // 追加Prev、日期、Next到导航容器
    this.EL_navigation.forEach((EL) => EL.append(this.EL_prev, this.EL_issue, this.EL_next));

    // 设置初始页码
    this._page = this.page;
}

prev(n = 1) {
    this._page -= n;
    return this;
}

next(n = 1) {
    this._page += n;
    return this;
}

show(idx) {
    this._page = idx;
    return this;
}

set _page(n) {
    this.page = this._mod(n);
    [...this.EL_pages, ...this.EL_buttons].forEach((EL) => EL.classList.remove(this.classActive));
    [this.EL_pages[this.page], this.EL_buttons[this.page]].forEach((EL) => EL.classList.add(this.classActive));
    // 触发回调
    this.onChange.call(this);
}

get _page() {
    return this.page;
}
}

// 使用示例
const mySectionTabs = new Tabs("#issue-nav", {
    onChange() {
        console.clear();
        console.log(`当前页码索引: ${this.page}`);
    }
});

内容的提问来源于stack exchange，提问作者linnse