JS for循环多次append同一DOM元素仅生成1个的问题求解

• document.createElement("li") 仅在循环外执行了一次，全程操作的都是同一个DOM节点对象，并非每次循环生成新的li元素
• 浏览器appendChild API的执行规则是：如果传入的节点已经存在于当前文档的DOM树中，会先将该节点从原位置移除，再插入到新的指定位置。因此循环多次调用appendChild(li)，本质是反复把同一个li节点从ul中移除再重新插入，最终只会保留1个li元素
• 额外的逻辑瑕疵：你写的循环条件i <= 3 实际会执行4次循环（i取值为0、1、2、3），如果预期循环3次应改为i < 3

要生成3个独立的li元素追加到ul中，只需把创建li节点的逻辑移入循环内部，每次循环都生成全新的节点即可：

let ul = document.querySelector("ul");
for (let i = 0; i < 3; i++) {
  let li = document.createElement("li");
  ul.appendChild(li);
}

如果需要给所有li设置统一的内容、样式或事件，可在循环内创建li之后单独配置对应属性即可。

内容的提问来源于stack exchange，提问作者Ren Jitsm