JavaScript循环为所有select元素添加新选项时的异常问题

我想给页面里所有的下拉菜单（select元素）添加一个新选项，写了两段代码结果却不一样：

第一段代码（只有最后一个select出现新选项） #

// 创建选项
let opt;
opt = document.createElement('option');
opt.value = 10;
opt.text = 'hello';

// 循环添加到每个select
document.querySelectorAll('select').forEach(ele => {
  ele.add(opt);
});

第二段代码（所有select都成功添加新选项） #

document.querySelectorAll('select').forEach(ele => {
let opt;
opt = document.createElement('option');
opt.value = 10;
opt.text = 'hello';
ele.add(opt);
});

原因很简单：

• DOM元素是唯一的实体，一个元素对象只能存在于DOM树的一个位置。你在循环外创建的opt是同一个option元素，第一次循环把它加到第一个select里，第二次执行ele.add(opt)时，其实是把这个option从之前的select中移除，再放到当前的select里。循环结束后，这个option自然只会留在最后一个select中。
• 而在循环内部创建option时，每次循环都会生成一个全新的option元素对象，每个select添加的都是独立的元素，所以所有下拉菜单里都会出现这个新选项。

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