erstellen Audio Element dynamisch in Javascript

Question

Ich muss dynamisch einer Audio-Marke schaffen zwischen <div class="audio-player" id="song"></div>

erstellen müssen:

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

in: <div class="audio-player" id="song"></div> helfen bitte seine sehr wichtig für mich

Answer 1

Sie können tun es in mehrfacher Hinsicht. Hier sind einige:

Mit innerHTML

verwenden, wenn Sie alle der inneren HTML ersetzen möchten, und kümmern sich nicht um Verweise auf Elemente.

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

Mit appendChild

verwenden, wenn Sie einen Verweis auf Ihre Audio-Element haben wollen, und vielleicht andere Elemente, die schon drin sind.

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

Mit insertAdjacentHTML

Verwenden Sie diese Methode, wenn Sie dort andere Elemente, die Sie zuvor verwiesen und wollen einen Verweis halten, sondern auf die audio über eine Referenz nicht kümmern Element für jetzt.

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