为什么for循环外创建带属性的DOM节点，循环appendChild仅作用于最后一个元素？

首先你需要先明确两个DOM操作的基础规则，理解后就能完全对应上你遇到的现象：

• 浏览器中的DOM节点是存在于内存中的独立实体，我们平时用变量保存的不是节点本身，只是指向这个实体的引用地址。
• appendChild()的原生实现逻辑，是把传入的节点从它当前的挂载位置移动出来，放到目标父节点的子节点列表末尾——这个方法默认不会为传入的节点生成副本。

异常代码的执行流程拆解 #

• 你在循环外通过document.createElement('div')创建的节点，在整个页面运行周期里只有唯一的一个实体，变量node存的就是指向这个实体的引用。
• 第一次循环（i=0）：执行video[0].appendChild(node)，把这个唯一的节点挂载到第一个.video-container元素下。
• 第二次循环（i=1）：执行video[1].appendChild(node)，此时JS识别到当前引用指向的节点已经挂在第一个容器下，会直接把它从原位置摘下来，挂载到第二个容器下。
• 第三次循环（i=2）：重复上述移动逻辑，节点又被从第二个容器移除，挂到第三个容器下。
• 整个循环走完，这个唯一的节点最终就停留在最后一个.video-container里——全程没有生成任何新的节点副本，这就是你看到带textWebinare的节点只出现在最后一个元素上的根本原因。这个过程和你在循环里有没有修改node变量的值完全没有关系，只要传的是同一个引用，移动逻辑就会正常触发。

这里澄清一个常见认知误区：这个现象和你用var在循环外声明变量没有任何关系——哪怕你换作用域更严格的let在循环外声明同一个节点，只要变量指向的是同一个DOM实体，结果完全不变。本质问题从来不是变量声明方式，而是DOM节点的引用规则和appendChild的移动逻辑。

正常代码的运行逻辑解释 #

• 每次进入循环迭代时调用document.createElement('div')，都会在内存里生成一个全新的、完全独立的DOM节点实体，每次创建的节点都有独立的内存地址，互相之间没有任何关联。
• 每次调用appendChild()时，传入的是本次循环刚生成的独立节点，自然会被单独挂载到当前迭代对应的.video-container下，不会出现跨容器移动的问题。

实用优化提示 #

• 你现在循环里给每个节点设置相同的id="textWebinare"是不符合HTML规范的，同一个文档中不允许出现重复的id值，如果需要做元素标识，建议改用class属性实现。
• 如果你不想每次循环都重复写节点初始化的代码，可以在循环外创建一个基础模板节点，每次循环时用cloneNode(true)方法显式生成深度副本，再把副本挂载到对应容器上，代码复用性会更好。

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