使用JavaScript在现有元素后插入新元素及解决insertBefore报错

两个问题直接导致运行报错：

1. document.getElementsByClassName('item-pri') 返回值是HTMLCollection元素集合，不是单个DOM节点，集合本身不存在parentNode属性，传入insertAfter方法后调用parentNode.insertBefore自然会抛出类型错误。
2. 固定2秒的延迟执行逻辑不可靠，页面加载速度受网络影响大，很容易出现延迟到期但价格节点还没渲染完成的情况，同样会触发找不到节点的错误。

window.addEventListener('load', function () {
    // 轮询检测价格节点是否渲染完成，替代固定延时
    const checkPriceTimer = setInterval(function() {
        const priceNode = document.getElementById("gsItemPrice");
        // 价格节点未加载完成时直接等待下一轮检测
        if (!priceNode) return;

        clearInterval(checkPriceTimer);
        // 计算对应美元价格
        const rmbPrice = Number(priceNode.innerText.replace('¥', '').replace('.00', ''));
        const usdPrice = rmbPrice * 0.15;
        console.log("$" + usdPrice);

        // 创建要插入的价格元素
        const usdPriceEl = document.createElement('p');
        usdPriceEl.style.fontSize = '20px';
        usdPriceEl.style.margin = '0';
        usdPriceEl.innerText = "$" + usdPrice.toFixed(2);

        // 插入到原有价格标签后方
        priceNode.parentNode.insertBefore(usdPriceEl, priceNode.nextSibling);
    }, 300);
})

• 弃用固定超时等待，改用300ms间隔的轮询检测，确认价格节点渲染完成后立刻执行逻辑，既减少不必要的等待时间，也不会因为页面加载慢导致逻辑执行失败。
• 直接定位id为gsItemPrice的价格标签作为插入锚点，插入位置完全匹配价格后方的需求，不会出现位置偏移。
• 新增节点存在性校验，从根源上避免找不到节点时的方法调用错误。
• 给新生成的价格标签清除p标签默认外边距，避免和原有价格之间出现多余空白，同时给美元价格增加两位小数格式化，符合价格显示的常规逻辑。

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