在Javascript中动态创建音频元素

Question

我需要在<div class="audio-player" id="song"></div>之间动态创建一个音频标记

需要创建：

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

in: <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">');