当我在for循环外声明包含li的变量时，循环只打印了一个列表项。我读到了这个问题，发现两个相同的节点不能同时出现在同一个地方，所以每次添加新的li时，循环都会删除创建的li（这导致最后只打印了一个列表项）
但是在for循环中声明变量时，代码工作了，创建了4个列表项。我想了解当我在循环中声明变量时，以编程方式发生了什么。
然后，我尝试在控制台中打印列表项的变量，它打印了4个列表项，这是否意味着当循环每次运行时，它只是更新listItem变量的值，以便一次包含多一个列表项？
但是变量的重新声明是如何发生的呢？
代码：
let theMenu = document.createElement("ul");
for (let i = 0 ; i <= 3; i++) {
let listItem = document.createElement("li");
theMenu.append(listItem);
}
2条答案
按热度按时间t2a7ltrp1#
下面是在这两种情况下for...循环迭代期间发生的情况：
希望这些视觉效果有助于理解循环内变量作用域的概念。
axzmvihb2#
一个元素只能在文档中出现一次。
如果你
append一个元素已经在文档中的某个地方，那么它将被 * 移动 * 而不是克隆。如果您将
let listItem = document.createElement("li");行放在循环之外，那么您将创建一个列表项，然后将其添加到文档四次（第二次和后续几次移动它）。如果将该行保留在循环中，则创建了四个列表项。