在Javascript中動態創建音頻元素

Question

我需要在<div class="audio-player" id="song"></div>之間動態創建音頻標簽

需要創建：

<audio id="audio-player" controls="controls" src="media/Blue Browne.mp3" type="audio/mpeg">

在： <div class="audio-player" id="song"></div>請幫助它對我非常重要

Answer 1

您可以通過多種方式完成此操作。 這里有一些：

使用innerHTML

如果要替換所有內部HTML，請使用此方法，而不關心對元素的引用。

document.getElementById('song').innerHTML = '<audio id="audio-player" controls="controls" src="media/Blue Browne.mp3" type="audio/mpeg">';

使用appendChild

如果您想要對音頻元素以及可能已存在的其他元素進行引用，請使用此選項。

var sound      = document.createElement('audio');
sound.id       = 'audio-player';
sound.controls = 'controls';
sound.src      = 'media/Blue Browne.mp3';
sound.type     = 'audio/mpeg';
document.getElementById('song').appendChild(sound);

使用insertAdjacentHTML

如果您之前引用了其他元素並希望保留引用，但是暫時不關心對audio元素的引用，請使用此方法。

document.getElementById('song').insertAdjacentHTML('beforeend', '<audio id="audio-player" controls="controls" src="media/Blue Browne.mp3" type="audio/mpeg">');