Escribí un javascript que aumenta un conjunto de números cada segundo, donde cada conjunto aumentado escribe en una nueva línea separada por una regla horizontal. P.ej;
20220215155
20220215156
20220215157
20220215158 etc...
var i = 20220215155; function increment(){ i++; document.getElementById('period').innerHTML += i + "<br />" + "<hr />" ; } setInterval('increment()', 1000);Pero quiero que cada conjunto actual de números esté siempre en la primera línea, por lo que un conjunto previamente aumentado va por debajo del conjunto actualmente aumentado... Por ejemplo;
20220215159
20220215158
20220215157
20220215156
20220215155
Por favor, ¿cómo hago esto?
¿Como esto?
<button id="start">Start Incrementing</button> <button id="stop">Stop Incrementing</button> <div id="main"></div> <script> const main = document.querySelector('#main'); const startBtn = document.querySelector('#start'); const stopBtn = document.querySelector('#stop'); let i = 0; let interval = null; const createElem = () => { const div = document.createElement('p'); div.className = 'inc-elem'; const h1 = document.createElement('h1'); h1.innerText = i; const hr = document.createElement('hr'); div.appendChild(h1); div.appendChild(hr); return div; }; window.addEventListener('DOMContentLoaded', () => { const startingDiv = createElem(); main.prepend(startingDiv); }); const increment = () => { i++; const newDiv = createElem(); main.prepend(newDiv); }; startBtn.addEventListener('click', () => (interval = setInterval(increment, 1000))); stopBtn.addEventListener('click', () => clearInterval(interval)); </script>