使用 document.createElement() 创建元素，然后使用 document.getElementById() 设置 id 未定义

Question

请参阅此https://jsfiddle.net/vpLbvp0o/17/作为我的问题的示例。

我正在尝试动态创建音频元素，在 html 页面上分层音乐。这是我在创建新的音频元素并播放音乐时所做的事情：

const new_layer = document.createElement("audio");
new_layer.id = "hello";
new_layer.src = "some_sound.mp3";
new_layer.play();

这样就可以了，音乐开始播放。稍后，如果我想使用我设置的 id 来引用同一个元素来暂停音乐或更新 src，则使用会document.getElementById("hello")返回 null。找不到该元素，但音乐显然仍在 DOM 中播放。我如何引用这个我显然已经创建并且仍然存在的元素？在 jsfiddle 中，您可以看到我在尝试检索元素之前正在等待超时，但它似乎不存在。

如果我对 HTML 文档中已定义的元素执行相同的操作，则一切正常。这是使用 JavaScript 动态创建元素的限制吗？

Answer 1

该节点不在 DOM 中，您需要添加它。

document.body.appendChild(new_layer);