使用JavaScript为含音频文件的产品卡片添加专属按钮

你当前的代码逻辑存在问题：getElementsByTagName('audio')返回的是HTMLCollection对象，哪怕没有匹配到元素也不会返回null，所以!item.getElementsByTagName('audio')这个判断永远不成立，导致所有商品卡片都会显示按钮。

正确的做法是先获取当前商品卡片里的audio元素，判断它是否存在，只有存在时才创建并添加按钮：

var products = document.querySelectorAll('ul.products');
products.forEach(function(product){
    var voice = product.querySelectorAll('li.product > div.nv-card-content-wrapper');
    voice.forEach(function(item) {
        // 先获取当前卡片里的audio元素
        var audioEl = item.querySelector('audio');
        // 只有存在audio元素时才创建按钮
        if (audioEl) {
            var btn = document.createElement('button');
            btn.className = 'play_audio';
            btn.textContent = "点击试听";
            btn.setAttribute("type", "button");
            btn.addEventListener('click', () => {
                audioEl.play();
            });
            item.appendChild(btn);
        }
    });
})

逻辑说明： #

• 用querySelector('audio')获取当前商品卡片内的audio元素，该方法找不到匹配元素时会返回null
• 通过if (audioEl)判断元素是否存在，仅存在时执行按钮创建与事件绑定逻辑
• 直接复用已获取的audioEl绑定播放事件，避免重复查询DOM，提升性能

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