18

I need to create an audio tag dynamically in between <div class="audio-player" id="song"></div>

Need to create:

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

in: <div class="audio-player" id="song"></div> please help its very important for me

1
  • 1
    so what is the problem you are facing? Commented Jun 10, 2016 at 0:17

1 Answer 1

31

You can do it in multiple ways. Here are some:

Using innerHTML

Use this if you want to replace all of the inner HTML, and do not care about references to elements.

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

Using appendChild

Use this if you want to have a reference to your audio element, and maybe other elements that are already in there.

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

Using insertAdjacentHTML

Use this method if you have other elements in there that you previously referenced and want to keep a reference to, but don't care about a reference to the audio element for now.

document.getElementById('song').insertAdjacentHTML('beforeend', '<audio id="audio-player" controls="controls" src="media/Blue Browne.mp3" type="audio/mpeg">');
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.