estoy intentando mostrar horarios que tengo en un array pero la idea es que se muestren uno debajo del otro y no lo estoy logrando. Los elementos los traigo separados por *. Si alguien me puede ayudar a ver què estoy haciendo mal se lo agradeceria.
horario_proximo_origen ="11:37:00*11:38:00*11:39:00*11:40:00*11:41:00";
array_horario_proximo_origen= horario_proximo_origen.split('*');
cantidad_horario_proximo = array_horario_proximo_origen.length;
document.getElementById("titulo_horario_proximo_origen").text= "Prox. horarios "+result.linea_origen+", parada "+result.nombre_origen_directo;
for (i=0; i<=cantidad_horario_proximo; i++){
document.getElementById("horario_proximo_origen").text= array_horario_proximo_origen;
}
<div id ="proximos_horarios" style ="visibility:block; width:100%;">
<a id= "titulo_horario_proximo_origen" href="#" style = " background-color: #86CE18;color:#FFF; width:100%"></a><br>
<a id= "horario_proximo_origen" href="#" style = "color:#000;"></a>
<br><br>
</div>