同一forEach循环中多次调用appendChild仅最后一个datalist添加选项的问题及解决方案咨询

安全阿岳

2026-4-28

问题解答：同一个forEach循环给两个datalist添加选项

嘿，这个问题我之前也碰到过！其实完全可以在同一个forEach循环里搞定，不用写两个重复的循环——你只需要理解DOM元素的一个核心特性就行。

直接可用的修正方案

方案1：每次循环创建两个独立的option元素

这种方式直观易懂，给每个datalist单独创建对应的<option>：

listCities.forEach(function(city){
  // 为listFrom创建专属option
  let optionFrom = document.createElement('option');
  optionFrom.value = city;
  listFrom.appendChild(optionFrom);
  
  // 为listTo创建专属option
  let optionTo = document.createElement('option');
  optionTo.value = city;
  listTo.appendChild(optionTo);
});

方案2：克隆已创建的option元素（更简洁）

如果不想重复写创建option的代码，可以用cloneNode()方法复制已有的元素：

listCities.forEach(function(city){
  let option = document.createElement('option');
  option.value = city;
  listFrom.appendChild(option);
  
  // 克隆这个option，参数true表示深克隆（复制元素的所有属性和子节点）
  listTo.appendChild(option.cloneNode(true));
});

为什么原代码会失效？

你遇到的问题核心在于DOM元素的唯一性：

每个DOM节点都是一个唯一的实体，同一时间只能存在于DOM树的一个位置。
当你第一次调用listFrom.appendChild(option)时，这个<option>被挂载到了listFrom的DOM分支下；
紧接着调用listTo.appendChild(option)时，浏览器并不会自动复制这个元素，而是会把它从原来的位置（listFrom）移动到新的位置（listTo）。
循环结束后，所有的<option>都被最后一次的appendChild操作移到了listTo里，所以listFrom里就没有选项了。