Si ejecuta este código javascript a continuación,
var i = 20220215155; function increment(){ i++; document.getElementById('period').innerHTML += i + "<br />" + "<hr />" ; } setInterval('increment()', 32100);verá que después de cada 30 segundos, los números (20220215155) se incrementan y cada incremento se imprime en una nueva línea. P.ej;
**20220215156
20220215157
20220215158
20220215159
20220215160**
Pero quiero que cada impresión se clasifique de esta manera después de cada incremento;
**20220215160
20220215159
20220215158
20220215157
20220215156**
Por lo que si 20220215156 está en la primera línea, después de 30 segundos, 20220215157 debería estar en la primera línea y los números anteriores pasan a la segunda línea automáticamente y después de los siguientes 30 segundos, 20220215158 aparece en la primera línea y así sucesivamente. Solo espero que alguien entienda.
Por favor necesito ayuda para hacer eso.
let info = document.getElementById('info'); let num = 20220215155; setInterval(() => { let newElement = document.createElement('p'); newElement.innerHTML = `${++num}<hr>`; info.insertBefore(newElement, info.childNodes[0]); //Adding newElement at the beginning of the parent }, 1000); <html> <body> <div id="info"> </div> </body> </html>insertAdjacentHTML es útil aquí. Puede usar la propiedad afterbegin para agregar nuevos elementos que contengan los números en la parte superior del contenedor.
const i = 20220215155; const div = document.querySelector('#period'); // The function accepts a variable (the new number) function increment(i) { // Prepend the number to the container div.insertAdjacentHTML('afterbegin', `<div>${i}</div><hr>`); // Call the function again with an incremented number setTimeout(increment, 1000, ++i); } increment(i); <div id="period"></div>Documentación adicional