Utwórz element audio dynamicznie w JavaScript

Question

muszę utworzyć tag dźwięku dynamicznie pomiędzy <div class="audio-player" id="song"></div>

Trzeba utworzyć:

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

w: <div class="audio-player" id="song"></div> pomóż jej bardzo ważne dla mnie

Answer 1

Możesz zrobić na wiele sposobów. Oto niektóre:

Korzystanie innerHTML

Użyj tego, jeśli chcesz zastąpić wszystkie wewnętrznej HTML i nie dbają o odniesienia do elementów.

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

Korzystanie appendChild

Użyj tego jeśli chcesz mieć odniesienie do swojego elementu audio, a może i inne elementy, które są już w środku.

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

Korzystanie insertAdjacentHTML

użyć tej metody, jeśli masz inne elementy, które wcześniej nie odwołuje i chcesz zachować odniesienie do, ale nie dbają o odniesienie do audio element na razie.

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