Hello,
I pick an item to append to a parent node with this method:
Code:
for (var i = 0; i < 4; i++){
	(function(x){
		myLis[x].addEventListener("click", function() {
			pickItem(x);
		});
	})(i);
}
function pickItem(x) {
	var div = document.getElementById('addHere');
	var audio = document.createElement('audio');
	div.insertBefore(audio, div.childNodes[0]);
}
When you use the command console.log(div); it would shows up like this:
Code:
<div id="addHere">
	<audio src="1.mp3"></audio>
</div>
But when I click on other items on the <li> list for the third time it would show up like this:
Code:
<div id="addHere">
	<audio src="1.mp3"></audio>
	<audio src="4.mp3"></audio>
	<audio src="2.mp3"></audio>
</div>
All the songs are playing altogether (including three songs you clicked previously [first->one, second->two]) and cause browser aw snap (chrome).
So how do I play only one song at the time.
Thank you,