我遇到一个看起来很简单的问题，但我仍然不知道如何解决。
在我的HTML文件中有这个标签:
<p id="best-individual-text" style="display: inline-block"></p>
作为上下文，我正在构建一个简单的遗传算法来进化个体(字符串)的种群，以达到目标短语。在我的.js文件中，我有一个循环，它创建新的种群并找到该种群中的最佳个体，并且只有当其中一个个体与目标短语相同时，循环才会停止。
我想做的是用每一代最佳个体的字符串更新best-individual-text文本内容。由于while循环在每次迭代中都会创建一个新的种群，因此每次迭代都会产生一个新的最佳个体。
在这个while循环中，我有以下代码行:
document.getElementById("best-individual-text").textContent = getBestIndividual();
注意:getBestIndividual()返回一个字符串
这就是我的问题:HTML没有得到更新。在循环停止之前，标签保持空白，只有在此之后，标签才会被最后一个最佳个体填充。
如果我手动尝试，也就是说，在while循环之外，它会工作得很好。我唯一的猜测是while循环运行得太快，HTML来不及更新。尽管如此，我想我已经看到人们在while循环中更新HTML，所以我真的不明白为什么它现在可以工作了。
另外，我试过用setInterval代替while循环，但它仍然不起作用。即使它确实有效，我也不想为每个循环设置任何类型的间隔。
问题可能是什么，如何解决?
提前感谢!
如果有人需要查看更多代码，这里是github: https://github.com/pedroheck/genetic-algorithms/tree/main/Word%20Race
我试了试你的代码，在某些情况下，我点击输入一些文本，点击"提交"，什么也没发生，实际发生的是你的算法处于某种无限的，或长时间运行的循环中，它永远不会到达你试图修改HTML的点。
您可以通过简单地在试图修改HTML的行设置一个断点来判断这一点，并注意它根本不会被击中。另一个提示是窗口变得无响应。
我的建议是仔细看看你的算法，并尝试设置一些限制。console.log语句将是您的朋友，因为它们将帮助您查看代码的哪些部分运行得最多。