Crea elemento audio in modo dinamico in Javascript

Question

ho bisogno di creare un tag audio in modo dinamico tra <div class="audio-player" id="song"></div>

bisogno per creare:

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

in: <div class="audio-player" id="song"></div> si prega di aiuto la sua stessa importante per me

Answer 1

Si può fare in più modi. Eccone alcune:

Utilizzando innerHTML

Utilizzare questo se si desidera sostituire tutto il codice HTML interno, e non si preoccupano di riferimenti a elementi.

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

Utilizzando appendChild

Utilizzare questo se si vuole avere un riferimento al vostro elemento audio, e forse altri elementi che sono già in là.

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

Utilizzando insertAdjacentHTML

Utilizzare questo metodo se si dispone di altri elementi in là che in precedenza si fa riferimento e si desidera mantenere un riferimento a, ma non si preoccupano di un riferimento al audio elemento per ora.

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