对HTML2Canvas使用insertBefore和insertAfter

Question

我正在将图表导出到文件中，我想在图像中添加页眉和页脚，都包含一些文本。

标题函数：

putHeader(element) {
    const targetElement = element.querySelector(".my-css-class");
    $(`<div class="...">${this.headerValue}`</div>).insertBefore(targetElement);

    element.querySelectorAll('...').forEach(el => {
            el.style.display = "none";
        });
}

这个很好用。

如果我像下面那样添加页脚功能，它将在页眉下方但图表上方添加页脚。如果我将insertBefore()更改为insertAfter()，则根本不会显示页脚文本。

putFooter(element) {
    const targetElement = element.querySelector(".my-css-class");
    $(`<div class="...">${this.footerValue}`</div>).insertBefore(targetElement);

    element.querySelectorAll('...').forEach(el => {
            el.style.display = "none";
        });
}

html2canvas函数：

html2canvas(element, {
    scale: ...,
    width: ...,
    height: ...,
    ...
    onclone: (element) => {
        this.addHeader(element);            
        element.querySelector('...').style.height = "700px";
        element.querySelector('...').style.width = "1300px";
        this.addFooter(element);
    },
    }
    ).then(function(canvas) {
    ...
}

我试图将this.addFooter(element)放在onclone()内的不同位置，但是结果是相同的。

有什么建议吗？