元素使用document.createElement()创建，然后使用document.getElementById()设置id。
元素使用document.createElement()创建，然后使用document.getElementById()设置id。
提问于 2018-03-29 01:37:38
请参阅此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();这起作用了，音乐开始播放了。稍后，如果我想使用设置为暂停音乐或更新src的id引用相同的元素，则使用document.getElementById("hello")返回null。找不到元素，但音乐显然仍在DOM中播放。如何引用我显然已经创建并仍然存在的元素？在jsfiddle中，您可以看到，在尝试检索元素之前，我正在等待超时，但它似乎并不存在。
如果我对HTML文档中已经定义的元素做了同样的事情，那么一切都很好。这是使用JavaScript动态创建元素的限制吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-03-29 01:39:46
节点不在DOM中，您需要添加它。
document.body.appendChild(new_layer);
Stack Overflow用户
发布于 2018-03-29 01:52:28
从document，获得具有指定id 的元素，并且没有将其附加到文档中。
const player = document.createElement("AUDIO");
player.setAttribute("id", "hello");
player.src = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3";
player.play();
console.log(player.id);
console.log(player);
document.body.appendChild(player);
let get_player;
let audio_list;
setTimeout(function() {
get_player = document.getElementById("hello");
audio_list = document.getElementsByTagName("audio");
console.log(get_player);
console.log(audio_list);
}, 1000);
// Try pausing and playing the audio element. It does not work.
setTimeout(function() { get_player.pause(); }, 5000);
setTimeout(function() { get_player.play(); }, 10000);<audio id="ambient"></audio>
<audio id="background"></audio>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49546707
复制相关文章
相似问题
腾讯云开发者
