在Javascript中动态创建音频元素

前端之家收集整理的这篇文章主要介绍了在Javascript中动态创建音频元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要在< 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>
请帮助它对我非常重要

解决方法

您可以通过多种方式完成此操作.这里有一些:

使用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

如果您之前引用了其他元素并希望保留引用,但是暂时不关心对音频元素的引用,请使用此方法.

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

猜你在找的JavaScript相关文章