设置全局变量导致简单程序异常？求生效原理解析

嘿，很高兴你已经搞定了问题！咱们来唠唠这背后的门道，搞清楚为啥一开始的写法会踩坑，以及正确方案为啥能跑通。

首先先还原下你大概率遇到的场景——我猜你一开始的代码大概是这样的：

// 全局创建一个容器元素
const $itemContainer = $('<div class="each-container"></div>');
const data = ['苹果', '香蕉', '橙子'];
const $parent = $('.parent-container');

// 遍历数组，尝试添加每个元素
data.forEach(fruit => {
  $itemContainer.text(fruit);
  $parent.append($itemContainer);
});

运行之后你会发现，父容器里只有一个each-container，内容还是最后一个元素“橙子”，对吧？这就是因为你踩了DOM元素引用复用的坑。

核心原理：jQuery创建的元素是「唯一DOM节点」 #

当你调用$('<div class="each-container"></div>')时，jQuery会在浏览器内存里生成一个唯一的DOM元素节点，返回的jQuery对象本质上是指向这个节点的「引用」。

而DOM的规则是：同一个元素节点不能同时出现在DOM树的多个位置。所以当你第一次append时，这个节点被加到父容器里；第二次append时，浏览器会先把它从父容器里移除，再重新加进去（内容已经改成了“香蕉”）；第三次同理，最后就只剩最后一次添加的状态。

你的解决方案为啥生效？ #

我猜你最后改成了把容器创建的代码放到forEach循环内部，就像这样：

const data = ['苹果', '香蕉', '橙子'];
const $parent = $('.parent-container');

data.forEach(fruit => {
  // 每次循环都创建一个新的容器元素
  const $itemContainer = $('<div class="each-container"></div>');
  $itemContainer.text(fruit);
  $parent.append($itemContainer);
});

这时候每次迭代都会调用$('<div...')，相当于每次都在内存里生成一个全新的DOM节点——每个节点都是独立的、没有关联的个体。把这些独立节点依次append到父容器，自然就能得到三个不同的each-container，各自对应数组里的内容。

额外小技巧：用克隆复用模板 #

如果你想把容器的结构（比如类名、默认样式）定义一次，再批量创建实例，还可以用jQuery的.clone()方法：

// 先定义一个模板
const $template = $('<div class="each-container"></div>');
const data = ['苹果', '香蕉', '橙子'];
const $parent = $('.parent-container');

data.forEach(fruit => {
  // 克隆模板生成新元素（深拷贝，和原模板完全独立）
  const $itemContainer = $template.clone();
  $itemContainer.text(fruit);
  $parent.append($itemContainer);
});

.clone()会复制原元素的所有结构、属性和事件（默认不克隆事件，加true参数可以克隆），生成一个全新的DOM节点，效果和循环内创建完全一致，适合需要复用复杂模板的场景。

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