使用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();

这有效，音乐开始播放。稍后，如果我想使用我设置为暂停音乐或更新src的id引用此相同元素，则使用document.getElementById("hello")返回null。无法找到该元素，但音乐仍显然在DOM中播放。我如何引用我明显创建并仍然存在的元素？在jsfiddle中，你可以看到我在尝试检索元素之前等待超时，但似乎它不存在。

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

Answer 1

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

document.body.appendChild(new_layer);

Answer 2

document.getElementById从id 获取指定document 的元素，并且您没有将其附加到文档

＆＃13;

＆＃13;

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);

＆＃13;

<audio id="ambient"></audio>
<audio id="background"></audio>

＆＃13;

＆＃13;

＆＃13;