在插入javascript元素之前等待元素出现不起作用

Question

我正在尝试在 wordpress elementor 迷你购物车为空时添加一个按钮。为此，我想我会使用一个承诺来等待元素加载，然后插入一些相邻的 html 代码来显示按钮。

这两个部分似乎是分别返回一个承诺然后插入元素。然而，当他们一起工作时，没有元素出现？关于如何调试的任何想法？要注意什么。我如何监控每件事情的触发顺序以确保它以正确的顺序发生？

这是我下面的代码：这是 wordpress 的 sn-p。

<script>
    const checkElement = async selector => {
        while ( document.querySelector(selector) === null) {
            await new Promise( resolve =>  requestAnimationFrame(resolve) )
        }
        return document.querySelector(selector); 
    };

    checkElement('.woocommerce-mini-cart__empty-message').then((selector) => {
        
        var message = `
            <div style="margin-top:2rem" class="elementor-button-wrapper">
                <a href="/toilets" class="elementor-button-link elementor-button elementor-size-sm">
                    <span class="class="elementor-button-content-wrapper">
                        <span class="elementor-button-text">View our products</span>
                    </span>
                </a>
            </div>`;
        selector.insertAdjacentHTML('afterend', message);
        console.log(selector);
    });

</script>
<?php } );

有问题的页面是https://staging-woowoowaterlesstoilets.kinsta.cloud/，如果你在没有任何东西的情况下点击篮子，应该会出现一个按钮。它以前可以工作，但在更新了一些插件和 wordpress 之后它就停止了工作。

Answer 1

这样会更简单

const liveSelector = document.getElementsByClassName('woocommerce-mini-cart__empty-message');
let tId = setInterval(function() {
  if (liveSelector.length > 0) {
    clearInterval(tId)
    var message = `
            <div style="margin-top:2rem" class="elementor-button-wrapper">
                <a href="/toilets" class="elementor-button-link elementor-button elementor-size-sm">
                    <span class="class="elementor-button-content-wrapper">
                        <span class="elementor-button-text">View our products</span>
                    </span>
                </a>
            </div>`;
    liveSelector[0].insertAdjacentHTML('afterend', message);
    console.log("done");
  }
}, 500);