<!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>I know prompt will block current Thread, but ul.append(li) is executed after a user respond the prompt, before the next prompt begin.
Environment: Google Chrome Version 96.0.4664.45 (Official Build) (64-bit)
The browser will only be able to render the appended elements once the call stack has been emptied. You could think of it as doing:
<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
While you could fix it by adding a delay to the loop so that further code (and the browser) is free to use computational resources - it'd be better to avoid prompt entirely so you don't have to worry about this sort of thing (and to provide a better user experience). Use an <input> element and a button which, when pressed, takes the text from the input and creates a <li> with that text.
It might be better to use a different structure. Have subsequent questions triggered by the user answering, so that if they don't, it stops. And that way, you can use a little setTimeout in the script to be able to see the list growing after each answer.
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()Rendering never happens while the engine executes a task. It doesn’t matter if the task takes a long time. Changes to the DOM are painted only after the task is complete. Visit https://javascript.info/event-loop
Here is my test code:
<!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>All LI will paint only after the while block ends.