在插入 javascript 元素之前等待元素出现无效

Question

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

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

下面是我的代码：它是 wordpress 的一个片段。

<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);

在插入 javascript 元素之前等待元素出现无效

Waiting for element to appear before inserting javascript element not working

javascript

wordpress

elementor