Создание аудио элемента динамически в Javascript

Question

мне нужно создать тэг аудио динамически между <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> пожалуйста, помогите его очень для меня важно

Answer 1

Вы можете сделать это несколькими способами. Вот некоторые из них:

Использование 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

Используйте этот метод, если у вас есть другие элементы там, что вы ранее цитируются и хотите сохранить ссылку, но не заботятся о ссылкой на audio элемент на данный момент.

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