Necesitarías tener un contenedor previamente identificado al cual agregarás posteriormente los elementos una vez creados. Yo he creado en el HTML este elemento: <div id="resultados"></div>
y lo usaré para poner en él los diferentes elementos que se vayan creando.
Te mostraré una forma segura y optimizada de hacerlo.
Con respecto a la seguridad, sin duda encontrarás código que agregaría el contenido usando cosas como innerHTML
, lo cual no es seguro, debido a los riesgos de inyección de código, por eso he creado los elementos con createElement()
y he seteado sus atributos y su contenido con funciones dedicadas a esos fines.
Con respecto a la optimización, la web está plagada de malos ejemplos en los cuales, para casos como estos, sugieren agregar cada elemento al div
contenedor dentro del mismo bucle, lo cual no es óptimo, porque no conviene modificar el DOM dentro de bucles. Por eso he usado un fragmento, he agregado todo a ese fragmento dentro del bucle y finalmente he agregado ese fragmento al div contenedor una vez el bucle haya terminado, así, el DOM se modificará una sola vez. Esta es la forma más óptima, porque cada vez que modificas el DOM, éste se renderiza. Si tu bucle tiene N
elementos y modificas el DOM N
veces, significa que el DOM se renderizará N
veces y eso puede terminar siendo muy costoso.
Veamos el código. He puesto comentarios para que se entienda mejor. He usado un elemento p
por parecerme el más adecuado. Pero lo puedes cambiar por un span
, por un div
o por lo que quieras. En ese caso, te aconsejo que los espacios entre líneas los gestiones mediante reglas de estilo en un archivo .css
, aplicando así el principio de separación de responsabilidades.
Si hay algo que no has entendido, me lo puedes decir en un comentario, al pie de esta respuesta. Espero te sirva.
Obtenerhorariosdesdemedicos();
function Obtenerhorariosdesdemedicos() {
/*Referencia al div contenedor general*/
mDiv = document.getElementById('resultados');
/*Fragmento para ir agregando cada elemento*/
var mFragment = document.createDocumentFragment();
const Horario = {
dia: {
inicio: 8,
fin: 13
},
tarde: {
inicio: 16,
fin: 20
},
cada: 15,
};
var now = new Date();
var inicial = new Date(now.getFullYear(), now.getMonth(),
now.getDay(), Horario.dia.inicio, 0, 0, 0);
var final = new Date(now.getFullYear(), now.getMonth(), now.getDay(),
Horario.dia.fin, 0, 0, 0);
/*Variable para identificar cada id de los p*/
var i = 1;
for (var f = inicial; f <= final; f.setMinutes(f.getMinutes() +
Horario.cada)) {
let hora = ("0" + String(f.getHours())).slice(-2); //slice para dar formato de 2 digitos
let minutos = ("0" + String(f.getMinutes())).slice(-2);
/*Creamos un elemento p*/
var mP = document.createElement("p");
/*Establecemos su id con el valor de i y aumentamos i en 1*/
mP.setAttribute("id", `p${i++}`);
//console.log(mP);
/*Le agregamos el contenido de forma segura*/
mP.appendChild(document.createTextNode(`${hora}:${minutos}`));
/*Lo agregamos al fragmento*/
mFragment.appendChild(mP);
//console.log(hora + ":" + minutos);
}
/*Finalmente, agregamos el fragmento al div contenedor*/
mDiv.appendChild(mFragment);
}
<div id="resultados"></div>
div
u otro) al que agregues el contenido que obtendrás al leer el bucle.document.getElementById
debe ser usado para alcanzar un elemento por su ID, y por lógica ese documento debe existir previamente. No lo estás usando correctamente.