Créer un élément audio dynamiquement en Javascript
J'ai besoin de créer dynamiquement une balise audio entre <div class="audio-player" id="song"></div>
Besoin de créer:
<audio id="audio-player" controls="controls" src="media/Blue Browne.mp3" type="audio/mpeg">
dans:<div class="audio-player" id="song"></div> aidez-moi, c'est très important pour moi
Vous pouvez le faire de plusieurs manières. Voilà quelque:
en utilisant innerHTML
Utilisez-le si vous souhaitez remplacer tout le code HTML interne et ne vous souciez pas des références aux éléments.
document.getElementById('song').innerHTML = '<audio id="audio-player" controls="controls" src="media/Blue Browne.mp3" type="audio/mpeg">';
en utilisant appendChild
Utilisez-le si vous voulez avoir une référence à votre élément audio, et peut-être à d'autres éléments qui s'y trouvent déjà.
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);
en utilisant insertAdjacentHTML
Utilisez cette méthode si vous y avez d'autres éléments que vous avez précédemment référencés et que vous souhaitez conserver une référence, mais ne vous souciez pas pour l'instant d'une référence à l'élément audio .
document.getElementById('song').insertAdjacentHTML('beforeend', '<audio id="audio-player" controls="controls" src="media/Blue Browne.mp3" type="audio/mpeg">');