<!DOCTYPE HTML> <html> <body> <script> let ul = document.createElement('ul'); document.body.append(ul); while (true) { let data = prompt("Enter the text for the list item", ""); if (!data) { break; } let li = document.createElement('li'); li.textContent = data; ul.append(li); } </script> </body> </html>Sé que el mensaje bloqueará el subproceso actual, pero ul.append(li) se ejecuta después de que un usuario responde al mensaje, antes de que comience el siguiente mensaje.
Entorno: Google Chrome Versión 96.0.4664.45 (Compilación oficial) (64 bits)
El navegador solo podrá representar los elementos adjuntos una vez que se haya vaciado la pila de llamadas. Podrías pensar en ello como haciendo:
<script> let ul = document.createElement('ul'); document.body.append(ul); while (true) { let data = prompt("Enter the text for the list item", ""); if (!data) { break; } let li = document.createElement('li'); li.textContent = data; ul.append(li); } </script> // THEN render the elements Si bien puede solucionarlo agregando un retraso al ciclo para que el código adicional (y el navegador) puedan usar recursos computacionales libremente, sería mejor evitar prompt por completo para que no tenga que preocuparse por este tipo de cosas. (y para proporcionar una mejor experiencia de usuario). Use un elemento <input> y un botón que, cuando se presiona, toma el texto de la entrada y crea un <li> con ese texto.
Podría ser mejor usar una estructura diferente. Haga que las preguntas subsiguientes se activen cuando el usuario responda, de modo que, si no lo hacen, se detenga. Y de esa manera, puede usar un poco de setTimeout en el script para poder ver la lista crecer después de cada respuesta.
let ul = document.createElement('ul'); document.body.append(ul); function getAnswer() { let data = prompt("Enter the text for the list item", ""); if (!data) return let li = document.createElement('li'); li.textContent = data; ul.append(li); setTimeout(() => getAnswer()) } getAnswer()La renderización nunca ocurre mientras el motor ejecuta una tarea. No importa si la tarea lleva mucho tiempo. Los cambios en el DOM se pintan solo después de que se completa la tarea. Visite https://javascript.info/event-loop
Aquí está mi código de prueba:
<!DOCTYPE HTML> <html> <body> <script> let ul = document.createElement('ul'); document.body.append(ul); let count = 50; while (count >= 0) { //time consuming task for (let i = 0; i < 1e9; i++) { //pass } let data = count--; let li = document.createElement('li'); li.textContent = data; ul.append(li); } </script> </body> </html>Todo LI pintará solo después de que finalice el bloque while.