动态创建带ID的audio元素后，document.getElementById()获取结果为undefined

嗨，我懂你碰到的这个问题了——明明创建的audio能正常播放，可就是用document.getElementById()拿不到它，返回undefined对吧？

问题出在这：你只是用document.createElement()创建了元素，但没有把它添加到DOM树里。getElementById()是在当前页面的DOM结构中查找元素的，没挂载到DOM里的元素就像“游离”在页面之外，自然找不到它。

解决方法很简单：创建后把元素挂载到DOM中 #

只需要在播放前（或播放后都可以），把创建好的audio元素添加到页面的某个DOM节点下，比如document.body，或者你自己定义的容器元素里。

给你完整的示例代码：

// 创建audio元素
const new_layer = document.createElement("audio");
new_layer.id = "hello";
new_layer.src = "some_sound.mp3";

// 关键步骤：将元素添加到DOM树中
document.body.appendChild(new_layer);

// 播放音频
new_layer.play();

// 现在就能正常获取到元素了！
const targetAudio = document.getElementById("hello");
console.log(targetAudio); // 不会再返回undefined

额外小技巧：隐藏音频控件 #

如果不想让页面显示出audio的默认播放控件，可以给元素加个隐藏样式：

// 直接设置样式隐藏
new_layer.style.display = "none";

// 或者添加CSS类（更推荐，方便统一管理）
new_layer.classList.add("hidden-audio");

对应的CSS可以写在样式表中：

.hidden-audio {
  display: none;
}

这样既能实现音频分层播放，又能确保后续可以通过ID正常操作这个audio元素啦～

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