<!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)
CodePudding user response：
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.
CodePudding user response：
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()